Meu html tem essas linhas
<form id="purchaseform">
<input id="quantity" name="quantity" type="number" value="1">
<input name="product" type="hidden" value={{item_id}}>
<input id="submit" type="submit" value="Add to Cart">
</form>
Depois de clicar em enviar, quero que isso seja exibido nesta seção do meu html seu carrinho de compras: Tentando fazer isso com o método ajax, mas depois de clicar em enviar, nada é exibido. Alguém consegue descobrir o problema?
$("#submit").submit(function(event){
event.preventDefault()
$.ajax({
type: "POST",
url: '/cart',
dataType: "json",
success:function(data) {
console.log(data);
$("#cart-template").html(data)
}
})
})
Há mais de um problema com seu código, então explicarei o motivo em detalhes.
O primeiro problema que vi foi que você não está enviando nada com a solicitação AJAX. Para enviar dados específicos, use a propriedade data:
$.ajax({
type: "POST",
url: '/cart',
data: $(this).serialize(), // Call the form values as a string
success: function(data) {
console.log(data);
$("#cart-template").html(data)
}
})
Mas, o que é this?
Isso significa que não espere até que o botão enviar seja pressionado. Para dar ao seu código JavaScript um contexto melhor do seu aplicativo, manipule o envio do formulário para começar a trabalhar:
$("#purchaseform").submit(function(event){
...
})
Portanto, #purchaseformdeve ser sua tag de formulário.
Manipular o formulário dessa forma permitirá que você use
thispara fazer referência ao formulário real que foi enviado.
É por isso que usamos: $(this).serialize().
Como vi em seu código, você supostamente está enviando dataTyoe: "json", mas mais tarde usará a saída de sua solicitação AJAX e a anexará como HTML.
Portanto, a maneira mais simples, se você deseja retornar HTML da solicitação AJAX, remova a dataTypepropriedade para que seu código fique assim:
$("#purchaseform").submit(function(event){
event.preventDefault()
$.ajax({
type: "POST",
url: '/cart',
data: $(this).serialize(),
success: function(data) {
console.log(data);
$("#cart-template").html(data)
}
})
})
Aqui está uma DEMO AO VIVO para que você possa tentar coisas diferentes.
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras