Form 提交不换页面 action = url
前提
提交表单后,后台返回的是一个html
地址,也就是一个html
文件
<form id="search" action="/portal/" method="post" >
<input type="text" name="username"/>
<input type="password" name="password"/>
<a class="btn" onclick=search(1)>提交</a>
</form>
JS 本来是这样的,这样会跳转页面
function search(page){
$("#search").attr("action","/portal/");
$("#search").submit();
}
现在要求是不跳转页面,试过iframe
不行,因为页面内部有文件引用。最后改用ajax
,且最好实现后后台不需要做出任何改变。
function search(page){
$.ajax({
// ajax 请求的url
url: "/portal/",
// 向服务器改善的数据
data: function () {
// 为了调试方便,用了function
// 数据形式是这样的: "username=&password="
formData = $('#search').serialize();
return formData;
},
// 服务器返回的数据类型
dataType: 'html',
// 请求成功后要做的
success: function (resultData) {
// resultData 是服务器返回的 html 形式的数据
// <div><h1> 这是返回的 html 数据</h1></div>
$('#content').html(resultData);
},
// 请求出错后要做的
error: function (xhr) {
console.log(xhr);
}
});
}
像上面这样,在form
提交按钮处阻断用 form
默有的方法提交数据,用自己的方法可以控制页面不进行跳转,请求地址还是原来的,发送的数据还是原来的。