jquery ajax 请求未返回页面
jquery ajax request not returning to page
我的表单将多个文本字段和一个文件上传到 php 脚本以保存文件并将文本字段保存到 sql 数据库。行得通,我的 php 脚本以
结尾
('state' => 200, "success" => true, "id" => $_POST['id'], "titlea" => $_POST['title'], "addressa" => $_POST['address'], "lot_sizea" => $_POST['lot_size'], "zoninga" => $_POST['zoning'], "build_sizea" => $_POST['build_size'], "sale_pricea" => $_POST['sale_price'], "lease_pricea" => $_POST['lease_price'], "commenta" => $_POST['comment'], "transactiona" => $_POST['transaction'], "ad_linka" => $ad_link,
);
exit(json_encode($response));
这是 returning 一个 json 编码的响应。但是,return 停留在 php 页面上,不会返回带有 ajax 请求的页面。这是我的 ajax 脚本:
$("document").ready(function() {
$(".data-form").submit(function() {
var formData = new FormData($('form')[0]);
if (confirm("\t\t\tAre you ready to sumbmit this listing?\nYou can always edit the listing after going to the menu tab - edit listing.")) {
$.ajax({
type: "POST",
dataType: "json",
url: "add-list.php",
data: formData,
success: function(response) {
if (response.success) {
$("#modal1").modal('hide');
$("#add_frame").show();
$("#newbutt").show();
$(".atitle").html('<a href="' + response.ad_linka + '" target="_blank">' + response.titlea + '</a>');
$(".acomment").html(response.commenta);
$(".aaddress").html(response.addressa);
$(".asale-price").html(response.sale_pricea);
$(".alease-price").html(response.lease_pricea);
$(".alot-size").html(response.lot_sizea);
$(".abuilding-size").html(response.build_sizea);
$(".azoning").html(response.zoninga);
} else {
console.log("An error has ocurred: sentence: " + response.sentence + "error: " + response.error);
}
},
error: function() {
alert("An Error has ocurred contacting the server. Please contact your system administrator");
}
});
return false;
}
});
});
我该如何更改它才能取回页面并允许成功方法 运行?
这是我的表格的开头:
<form class="avatar-form" enctype="multipart/form-data" method="POST">
夫妻问题:
首先,您需要确保 select填写的表格正确。 $('form')
将 select 所有表格,$('form')[0]
将 select 第一个表格。您应该改为定位正确的表单。
$('.data-form')[0]
接下来,在发送 FormData 时,您必须将 processData 和 contentType 设置为 false,这样 jQuery 就不会尝试处理 FormData。 (这是在 $.ajax({...})
内完成的)
contentType: false,
processData: false
注意:ajax IE < 10 无法上传文件
使用 event.preventDefault
而不是 return false 也是一个好习惯(至少在调试时),并且在处理程序的顶部执行此操作,以便在出现任何语法错误时,您的表单不会提交,让您无法看到错误。有关示例,请参阅 Preston S 的回答。
我的表单将多个文本字段和一个文件上传到 php 脚本以保存文件并将文本字段保存到 sql 数据库。行得通,我的 php 脚本以
结尾 ('state' => 200, "success" => true, "id" => $_POST['id'], "titlea" => $_POST['title'], "addressa" => $_POST['address'], "lot_sizea" => $_POST['lot_size'], "zoninga" => $_POST['zoning'], "build_sizea" => $_POST['build_size'], "sale_pricea" => $_POST['sale_price'], "lease_pricea" => $_POST['lease_price'], "commenta" => $_POST['comment'], "transactiona" => $_POST['transaction'], "ad_linka" => $ad_link,
);
exit(json_encode($response));
这是 returning 一个 json 编码的响应。但是,return 停留在 php 页面上,不会返回带有 ajax 请求的页面。这是我的 ajax 脚本:
$("document").ready(function() {
$(".data-form").submit(function() {
var formData = new FormData($('form')[0]);
if (confirm("\t\t\tAre you ready to sumbmit this listing?\nYou can always edit the listing after going to the menu tab - edit listing.")) {
$.ajax({
type: "POST",
dataType: "json",
url: "add-list.php",
data: formData,
success: function(response) {
if (response.success) {
$("#modal1").modal('hide');
$("#add_frame").show();
$("#newbutt").show();
$(".atitle").html('<a href="' + response.ad_linka + '" target="_blank">' + response.titlea + '</a>');
$(".acomment").html(response.commenta);
$(".aaddress").html(response.addressa);
$(".asale-price").html(response.sale_pricea);
$(".alease-price").html(response.lease_pricea);
$(".alot-size").html(response.lot_sizea);
$(".abuilding-size").html(response.build_sizea);
$(".azoning").html(response.zoninga);
} else {
console.log("An error has ocurred: sentence: " + response.sentence + "error: " + response.error);
}
},
error: function() {
alert("An Error has ocurred contacting the server. Please contact your system administrator");
}
});
return false;
}
});
});
我该如何更改它才能取回页面并允许成功方法 运行?
这是我的表格的开头:
<form class="avatar-form" enctype="multipart/form-data" method="POST">
夫妻问题:
首先,您需要确保 select填写的表格正确。 $('form')
将 select 所有表格,$('form')[0]
将 select 第一个表格。您应该改为定位正确的表单。
$('.data-form')[0]
接下来,在发送 FormData 时,您必须将 processData 和 contentType 设置为 false,这样 jQuery 就不会尝试处理 FormData。 (这是在 $.ajax({...})
内完成的)
contentType: false,
processData: false
注意:ajax IE < 10 无法上传文件
使用 event.preventDefault
而不是 return false 也是一个好习惯(至少在调试时),并且在处理程序的顶部执行此操作,以便在出现任何语法错误时,您的表单不会提交,让您无法看到错误。有关示例,请参阅 Preston S 的回答。