网站表单提交AJAX局部刷新实现方法

在做网站时，网站不同页面大部分版块是相同的，只有某个版块的数据是变化的。这时我们可以使用AJAX局部刷新来实现表单提交时，在不变化网页地址的情况下更新某个版块数据。

下面介绍一下网站FORM表单提交AJAX局部刷新实现方法。

第一步：网站表单AJAX局部刷新实现需要信赖JQUERY，所以我们需要在网站代码里引入JQUERY；

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

第二步：下载表单AJAX局部刷新的JQUERY插件：jquery.form.js，下载地址： https://pan.baidu.com/s/1sfO0yFhWx6yruKee8twsZw 提取码: v61p

第三步：将下载的jquery.form.js上传到自己网站空间主题文件夹里，并使用以下的代码来引入jquery.form.js；（注意文件的路径）

<script src="/js/jquery.form.min.js"></script>

第四步：在FORM表单里加入id="tablistsearchform"，例如：

<form method="get" id="tablistsearchform" action="">

第五步：在需要显示刷新内容的DIV，加上id="listconall"，例如 ：

<div id="listconall">

第六步：在网站底部代码里</body>标签上面加以下的代码，实现网站表单AJAX局部刷新。

<script>

$(document).ready(function() {

var options = {

target: '#listconall', // 需要刷新的区域

//beforeSubmit: showRequest, // 提交前调用的方法

//success: showResponse // 返回后笤俑的方法

// other available options:

//url: url // 提交的URL, 默认使用FORM ACTION

//type: type // 'get' or 'post', override for form's 'method' attribute

//dataType: null // 'xml', 'script', or 'json' (expected server response type)

//clearForm: true // 是否清空form

//resetForm: true // 是否重置form

// $.ajax options can be used here too, for example:

//timeout: 3000

};

// 绑定FORM提交事件

$('#tablistsearchform').submit(function() {

$(this).ajaxSubmit(options);

// !!! Important !!!

// always return false to prevent standard browser submit and page navigation

return false;

});

});

</script>