零基础学做网站培训介绍

当前位置:

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

在做网站时,网站不同页面大部分版块是相同的,只有某个版块的数据是变化的。这时我们可以使用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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注