零基础学做网站培训介绍

当前位置:

网站表单提交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>

相关阅读:

wordpress表单插件contact-form及使用方法

jquery提交表单:实现点击同时提交多个form表单

WordPress表单插件:超级留言板插件

发表评论

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

相关教程

  • 很多网站都是注册登录功能,如果想在自己的网站上添加注册,登录功能,就需要制作一个注册、登录表单,制作注册、登录表单是比较简单的,利用DW就可以
  • wordpress表单插件contact-form介绍:WordPress联系表单插件 – Contact Form 7 是一款简单易用扩展性灵活的表单插件,可以自定义各式各样不同类型的
  • ASP网站注册框可以通过Dreamweaver CS6破解版软件轻松制作出来,注册框包括:用户名,密码,重复密码,姓名,电话,地址。(相关知识:如何制作网站的
  • (特别全)网站收录提交链接及各大搜索引擎站长工具百度网站收录提交http://www.baidu.com/search/url_submit.html百度自动提交百
  • 学习2天,提交我的博客模版作业,老师这是我学习了博客网站课程之后,自己做的博客网站,感谢老师的课程,发自内心感谢。我把这个模版对应的整站
  • 这是我昨晚防的模具企业站,提交一下。我看了别的同学做的网站都高大上,我自己做的这个网站是一个模具网站,还是传统网站的版面,虽然不好看,但比较
  • Ajax BootModal Login 是一个用Bootstrap的modal效果做的弹出式ajax前端注册登录插件,使用该插件,我们可以最简单的在前台添加一个ajax注册登陆按钮
  • 在做网站时,有些页面需要不断的获取数据,现在常用的方法就是通过AJAX 无刷新获取PHP接口数据,这样可以实现在不刷新页面的前提下,不断的获取加载数
  • 在做网站时,网站不同页面大部分版块是相同的,只有某个版块的数据是变化的。这时我们可以使用AJAX局部刷新来实现表单提交时,在不变化网页地址的情况
  • 请问我在本地环境下,按照网站制作教程一步步的操作 浏览次数 动态代码也替换了 插件也按装设置好了  然后在头部模板代码里面前面</head>插
  • 如何让php程序后台自动刷新,不管有没有用户打开了网站或者页面,它始终在后台自动刷新。在用户关闭浏览器后,该脚本仍然后在服务器上继续执行。就需
  • 一些个人单页网站制作的学员,要实现每当用户打开单页网站时,随机显示多个二维码中的一个,刷新一次就随机更换一个。并且单页内容中的微信号也跟着自