【逻辑】Ajax是隐秘地发送网页请求,向后台发送数据,不会刷新网页。
6.1Ajax逻辑
html表单提交数据→通过URL交给函数处理→HttpResponse返还给html的ajax→ajax将数据提交给后台
1)html创建表单+ajax功能。提交type为button,而不是submit。这样才不会刷新页面。
ajax通过按钮的 id 识别不同功能。表单可以不写form。
2)函数处理:
return返回的交给HTML中的function处理
6.2Ajax功能介绍
1)"# " :与提交按钮的id匹配;
2)url:提交处理的URL;
3)type:请求方式;
4)data:提交数据。有多种方式
①如果想获取表单数据(texyUser为文本框id)
②如果表单有form,可以一起打包多个文本框。(此时文本框通过name识别,form通过id识别,这里是form3)
5)dataType:函数return的数据格式,这里是JSON格式。
6)success:提交成功后的功能。res获取函数返回的数据
6.3Ajax实例
【表单】增加一条员工数据
【函数处理】用 ModelForm 检验数据,用 json 格式返回数据
【ajax获取数据】
1)每次处理前清除错误信息
2)功能:判断是否添加成功。
①成功:
alert 跳出成功信息;
location.reload():实现页面刷新
②失败:显示错误信息。
each:循环每个输入框的错误信息;
function():传入每个输入框的name和错误信息。;
$(“#id_”+name ).next():显示位置为每个输入框的下一行(系统默认给输入框的id命名为 id_"name");
text():显示信息为错误信息的第一个(错误信息为列表格式)。