form 避免 action 触发的页面跳转

版权声明：本文自撰，转载先跟我说一下比较好 https://blog.csdn.net/KimBing/article/details/86767126

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 默有的方法提交数据，用自己的方法可以控制页面不进行跳转，请求地址还是原来的，发送的数据还是原来的。