[英]Ajax keep redirecting to the php page
我有一个 shopify 商店,我想在产品页面上添加一个表单问题是当我想使用带有外部链接的 ajax 提交一个表单但我想留在它转到外部链接的同一页面上
<form method="post" id="fastform"action="http://website.fun/bianca/doc.php" class="form" enctype="multipart/form-data">
<label class="label" style="color: rgb(0, 0, 0);">Nom : </label>
<input placeholder="Nom" class="input" width="100%" type="text" name="nom" id="nom">
<label class="label" style="color: rgb(0, 0, 0);">Télephone* : </label>
<input placeholder="Telephone" class="input" width="100%" type="text" name="phone" id="phone">
<input placeholder="Adresse" class="input" width="100%" type="text" name="adresse" id="adresse">
<div id="form-messages"></div>
<button type="submit" class="button-input btn btn-default" name="btn"style="margin-top: 20px;" id="btn">Commander</button>
这是 js en ajax 部分
<script>
$(function () {
// Get the form.
var form = $('#fastform');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function (event) {
// Stop the browser from submitting the form.
event.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
}.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text("votre commande et bien traiter");
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})).fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! il\'ya un problem');
}
});
});
我希望页面保持不变并在同一页面上获得结果
尝试这个,
$( "#your_form_id" ).submit(function(event) {
event.preventDefault();
$.ajax({
beforeSend: function () {
//something to do before ajax call
},
complete: function () {
//something to do after ajax call
},
type:"POST",
data:$(this).serialize(),
url:"<?php echo $url;?>",
success:function(data){
$('#divId').html(data); // id where you want to retrive and show your data
}
});
});
请再次检查您的操作网址
尝试这个
像这样改变表格。
<form method="post" id="fastform" onsubmit='return submitForm()' action="http://website.fun/bianca/doc.php" class="form" enctype="multipart/form-data">
并像这样改变功能,
function submitForm(){
var formData = $('#fastform').serialize();
$.ajax({
type: 'POST',
url: $('#fastform').attr('action'),
data: formData
}.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text("votre commande et bien traiter");
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})).fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! il\'ya un problem');
}
});
return false;
}
试试这个代码:
$(function (){
$('form').bind('submit', function () {
$.ajax({ type: 'post',
url: 'libs/send.php',
data: new FormData($('form')[0]),
cache: false,
contentType: false,
processData: false,
success: function () {
alert("Data has been successfully inserted");
}
});
return false;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.