使用ajax发送表单信息

发布时间：2020-12-16 01:31:30 所属栏目：百科来源：网络整理

导读：1.GET方式下面这个是一个简单的ajax请求当失去焦点时候发送表单到服务器，然后服务器把发送的get信息输出。网页代码： !DOCTYPE htmlhtml head titleget提交/title meta charset="UTF-8" meta name="viewport" content="width=device-width,initial-scale=

1.GET方式

下面这个是一个简单的ajax请求当失去焦点时候发送表单到服务器，然后服务器把发送的get信息输出。

网页代码：

<!DOCTYPE html>
<html>
    <head>
        <title>get提交</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <script>
            function action(){
                var name = document.getElementById('uname').value;
 //  name=encodeURIComponent(name); //进行特殊字符编码
                var xhr  =new XMLHttpRequest();//创建ajax对象
                xhr.onreadystatechange=function(){//对状态进行监听
                  if(xhr.readyState===4)  
                  {
                    alert(xhr.responseText);//输出服务器返回的信息
                  }
                }; 
                xhr.open("get","./action.php?uname="+name);//通过get方式发送信息
                xhr.send();
            }
            
        </script>
    </head>
    <body>
        <p>用户名：<input type="text" id="uname" onblur="action()"/></p>
    </body>
</html>

服务器代码：

<?php
/**
 *  @功能 处理submit的表单
 */
print_r($_GET);

这样普通情况没有问题但是当表单内容出现特殊字符的时候就会出现偏差，比如输入的用户名信息为：tom&height=179

浏览器返回结果是：

这样就会出现问题链接就会变成"./index.php?name=tom&height=179",传递到服务器get信息就变成两个变量了，这个是错误的结果。因此我们需要给表单内容编码。

需要增加一行代码：

name=encodeURIComponent(name);//对链接进行编码

链接编码的结果变成了/action.php?uname=tom%26height%3D170

----------------------------------------------------------------------------------------------------------------------------------------------

2.POST发送请求

发送html代码为：

<!DOCTYPE html>
<html>
    <head>
        <title>post提交</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <script>
            function action(){
                var name = document.getElementById('uname').value;
                name=encodeURIComponent(name);
                var tel=document.getElementById('utel').value;
                var xhr  =new XMLHttpRequest();//创建ajax对象
                xhr.onreadystatechange=function(){//对状态进行监听
                  if(xhr.readyState===4)  
                  {
                    alert(xhr.responseText);//输出服务器返回的信息
                  }
                };   
                xhr.open("post","./action.php");//通过get方式发送信息
                xhr.setRequestHeader('Content-type',"application/x-www-form-urlencoded");//发送类型xform
             
                var info = "uname="+name+"&utel="+tel;
                xhr.send(info);
            }
        </script>
    </head>
    <body>
        <!-- 当电话文本框失去焦点是发送ajax的post请求-->
        <p>用户名：<input type="text" id="uname" /></p>
        <p>电话  :<input type="text" id="utel" onblur="action()"/></p>
    </body>
</html>

服务器代码为：

<?php
/**
 *  @功能 处理submit的表单
 */
print_r($_POST);

使用firebug查看发送情况

接收情况：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!