前后端交互之——AJAX提交
前言
学前后端也有一段时间了，一直没有时间整理一下前后端交互方面的知识，想着再回顾一下顺带着整理出自己的学习笔记。可能有些地方写的不是很好，欢迎批评指正！！！
<div><form action="/登录页面" method="POST" ><input class="input_box" type="text" name="user" placeholder="用户名"><br><input class="input_box" type="password" name="pwd" placeholder="密码"><br><button class="button_box">一键登录</button></form>
</div>一、AJAX是什么
二、AJAX基础
这里放一张我个人学习AJAX时候整理的思维导图。
个人觉得上面这张图应该比较详细了。接下来我就简单介绍一下：
创建一个XMLHttp实例对象
//为了兼容不同的浏览器,需要对XMLHttpRequest对象是否存在进行判断
var xmlh;
if (window.XMLHttpRequest)
{xmlh=new XMLHttpRequest();
}
else
{xmlh=new ActiveXObject("Microsoft.XMLHTTP");
}发送请求的方法
//创建实例对象
var xmlh;
if (window.XMLHttpRequest)
{xmlh=new XMLHttpRequest();
}
else
{xmlh=new ActiveXObject("Microsoft.XMLHTTP");
}/*open方法
xmlh.open(method,url,async)method -- http请求的方法url -- 请求发送的地址async -- 是否是异步*//*send方法
xmlh.send(string)string -- 仅用于post请求传值
*///设置请求头名称和值
xmlh.setRequestHeader("name":"values");获取状态码
在前端页面发起请求时，我们需要在JavaScript文件中去获取服务器端返回的状态码以便于及时做出响应，那么如何获取状态码呢？
//其中readState存储有XMLHttpRequest的状态//status是状态码xmlh.onreadystatechange=function()
{if (xmlh.readyState==4 && xmlh.status==200){document.getElementById("myDiv").innerHTML=xmlh.responseText;}
}主要函数
- showHint()
- showCustomer()
- loadXMLDoc()
showHint()函数是由onkeyup的监听事件触发，一般onkeyup可以设置在inpiut组件上
showCustomer()函数是由onchange监听事件触发，一般设置在select组件上
loadXMLDoc()用来读取xml文件
三、表单提交的几种方法
在前端中表单的提交到后端有如下的几种方式
1.简单的form表单提交
<div><form action="/登录页面" method="POST" ><input class="input_box" type="text" name="user" placeholder="用户名"><br><input class="input_box" type="password" name="pwd" placeholder="密码"><br><button class="button_box">一键登录</button></form>
</div><!--或者使用input，但是type要改为submit-->
<div><form action="/登录页面" method="POST" ><input class="input_box" type="text" name="user" placeholder="用户名"><br><input class="input_box" type="password" name="pwd" placeholder="密码"><br><input type="submit" class="button_box">表单提交</button></form>
</div>2.通过修改表单的onsubmit()函数来提交
这里就是简单举一个提交数据有效性判断的例子。
<script type="text/javascript">function check(){//判断用户名是否为空，需要returnif(document.form1.username.value==""){window.alert("空！");return false;}else return true;}
</script>
</head>
<body><form name="form1" method="" action="/" οnsubmit="return check()"><input type="text" name="username" /><input type="password" name="userpwd" /><input type="submit" value="提交表单" /></form></body>
3.使用JavaScript的事件监听进行表单提交
这种方法使用起来比较灵活，这里简单举一个例子。
<form id="form" action="" method=""><input type="text" name="name"/>
</form>
<script>document.getElementById("form").submit();
</script>4.无刷新页面表单提交
<form action="/" method="post" target="target"><input type="text" name="name"/>
</form>
<!--注意这里的iframe是隐藏起来的，你也可以让它显示出来看看-->
<iframe name="target" style="display:none"></iframe>5.AJAX表单提交
html代码如下：
<div class="form box-style" role="form"><input id="name-input" class="form-text sub" type="text" name="login_name" placeholder="请输入用户名"><input id="pwd-input" class="form-pwd sub" type="password" name="login_pwd" placeholder="请输入密码"><input id="btn" class="form-btn do-login" type="button" value="立即登录">
</div>JavaScript代码如下：
这里借助的是jQuery.js的写法实现AJAX表单提交。
$(document).ready(function($(".test").click(function(){$.ajax({url:common_ops.buildUrl("/login"),type:"POST",data:{'login_name':login_name,'login_pwd':login_pwd} ,dataType:'json',success:function(res){var callback = null;if(res.code==200){callback = function(){window.location.href = common_ops.buildUrl("/");}}common_ops.alert(res.msg,callback);})}}) ))总结
上面我大致讲述了AJAX的基本原理和使用方法，以及多种表单提交方法。在做项目中个人其实更多的是使用前端框架下的ajax表单提交，比较少用到XMLHttpRequest，虽然底层实现是一样的。前后端数据交互其实可以说是前后端开发学习中比较重要的一环，有时间的话后续也会给出我在学习这块内容时相应的知识整理。
喜欢的宝子劳烦举个爪子点个赞哈哈哈。。。
前后端交互之——AJAX提交相关推荐
- ajax学习----json，前后端交互，ajax
json <script>var obj = {"name": "xiaopo","age": 18,"gender& ...
- JavaScript 学习笔记（八）前后端交互；Ajax进行前后端交互
目录 一.前后端 二.前后端接口 三.Ajax 1. ajax接口步骤 2. 返回为json格式 四.请求方式 五.案例:登录 一.前后端 前端:用户可以看见的界面,我们一般浏览网页时看到的界面,展现 ...
- [JavaScript][AJAX] 前后端交互流程,ajax工作流程
目录 前后端交互流程 1.了解服务器 : 提供服务器的机器(计算机) 2.前端 访问服务器的几种方式 3.ajax技术 : 页面不跳转的情况下,向服务器请求数据 4.前后端交互三个流程 ajax工作流 ...
- 必学习的前后端交互框架ajax
ajax显然是最重要的框架 无论是c#,java,web程序通通能够解决前后端问题. 现在越来越多的人能够开发,为什么? 框架已经改变了程序员,现在基本是个程序员都可以在一个星期内写一个web程序. ...
- 【前端】前后端交互重点Ajaxの介绍及实战
❤️Ajax❤️ 每篇前言: 第一部分:JSON简介 效果展示: 第二部分:前后交互 1.此处介绍前后交互的两种方式: (1)利用form表单里的name属性进行前后端交互 HTML代码: Pytho ...
- 一、Django前后端交互之Ajax和跨域问题
一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是" ...
- Flask使用ajax进行前后端交互
ajax前后端交互的使用已经非常普及了, 这种数据交互方式比表单提交数据带给用户的使用体验更好一些.同时,利用ajax交互时数据传输一般使用json,我们可以很方便的管理我们所需要的数据.只需要定义好 ...
- 前后端交互ajax和axios入门讲解，以及http与服务器基础
ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 文章目录 ajax和http小白入门,客户端与服务器基础讲解,前后端交互(从入门到实践详细解析) 前言 一.Aj ...
- 前后端交互——Ajax
前后端交互Ajax Ajax jQuery中的ajax $.get() $.post() $.ajax() 案例:图书列表 Ajax Ajax 即"AsynchronousJavascrip ...
最新文章
- 网页如何与mysql服务器建立连接不上,html与mysql建立连接数据库
- 盐为什么能使冰熔化得更快
- logging总结 - log4j2使用流程[归档存储]
- The Future Of the Software Development
- 比Redis快5倍的中间件，为啥这么快？
- xilinx FPGA的远程更新（动态加载）详解（Using a Microprocessor to Configure 7 Series FPGAs）
- ssl1747-登山机器人【离散化,玄学,贪心】
- 2018南京区域赛 J-Prime Game
- mysql 数据库日志管理工具_mysql mysqlbinlog日志管理工具使用教程
- WF4.0 Beta1 CancellationScope 取消容器
- HoloLens 2开发：关闭性能分析窗口
- Java开发者还用SSH？大清朝都亡了，你知道吗？
- linux孟庆昌第六章课后题_周三多管理学第5版课后答案资料笔记和课后习题含考研真题详解...
- 最小二乘支持向量机--LSSVM分类及MATLAB代码实现
- Andriod程序的结构
- DropdownMenu 下拉菜单的使用
- 借助Net-Speeder对服务器进行优化
- mysql聚合函数求数据总和的语句,MySQL数据库考试试题和答案
- 软件测试肖sir__009之mysql多表（4）
- dom4j解析xml错误-version 后面跟随的值必须是用引号括起来的字符串