前后端交互之——AJAX提交

最新推荐文章于 2024-08-10 10:11:23 发布

荔枝当大佬

最新推荐文章于 2024-08-10 10:11:23 发布

阅读量1.6k

点赞数 1

分类专栏：前端文章标签：前端学习 ajax javascript 交互

本文链接：https://blog.csdn.net/qq_62706049/article/details/127582176

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

前言

学前后端也有一段时间了，一直没有时间整理一下前后端交互方面的知识，想着再回顾一下顺带着整理出自己的学习笔记。可能有些地方写的不是很好，欢迎批评指正！！！

2.通过修改表单的onsubmit()函数来提交

3.使用JavaScript的事件监听进行表单提交

4.无刷新页面表单提交

5.AJAX表单提交

总结

本篇文章主要讲的是AJAX，主要整理一下AJAX的基础知识，以及如何是用AJAX提交构造http请求实现前后端的交互。那什么是前后端交互呢？简单地讲，其实前后端交互就是用户在前端页面的触发事件产生的请求数据通过表单提交的方式发送到后端服务器中进行处理，后端再将用户请求的数据发送到前端页面进行展示。

在前端的学习中，相信大家可能会看到如下代码：

<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>

其中，在form表单上的action这个参数指的是表单提交到的路由地址，以在本机上开发为例，那这个地址就是http://127.0.0.1:80/登录页面，http请求方法就是post。上述的代码段实现的其实就是前后端交互的一部分过程。这里的form表单提交仅实现了前端往后端发数据，并没有在同一路由下实现前端处理后端数据并展示给用户的部分，自然也就无法实现无重载刷新页面数据。那么如何更好地实现前后端交互过程呢？如何让页面实现无刷新重载？这时候就要用到了AJAX表单提交了。

一、AJAX是什么

AJAX（Asynchronous JavaScript and XML）其实就是一个异步重载页面的方法，主要执行在javaScript脚本中，在与后端进行数据交互的过程中实现前端页面部分数据的无重载更新，提高用户体验和前端代码的可维护性。

二、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()
    {
	    //判断用户名是否为空，需要return
	    if(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，虽然底层实现是一样的。前后端数据交互其实可以说是前后端开发学习中比较重要的一环，有时间的话后续也会给出我在学习这块内容时相应的知识整理。

喜欢的宝子劳烦举个爪子点个赞哈哈哈。。。