精灵采集器
首页
产品功能
购买价格
建站教程
当前位置 :
HTML/JavaScript基础
>
正文
网站表单提交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>


姓名:
评论

vvv

2020-12-05 11:12:36

dd

©2018-2020 h5spirit.cn  | 京ICP备19057243号-1 | QQ群:694364182