ajax--表单和ajax分别使用get、post方法向后台传输数据

为了前端与后台进行交互，我们使用ajax来完成这些功能。

我们首先了解，什么是ajax？

Asynchronous JavaScript and XML

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新，可以局部刷新而不必整个页面整体刷新。

如何与服务器进行数据交换？

首先，需要自己搭建服务器，在服务端的环境中可运行PHP语言

从网页进入服务器有三种基本方式：

1.   localhost:+端口号
2.   127.0.0.1+端口号
3.   ip+端口号

然后，和服务器端的php页面建立联系

大致分为两种。一种是通过form表单向后台传输数据。一种是通过ajax向后台传输数据。

第一种：通过form表单向后台传输数据。

如下例子：在html页面中的form表单中，与 05.2.php 建立联系 ，数据传递方式为POST。

<form action="05.2.php" method="post">
    <input type="text" placeholder="请输入用户名" name="userName">
    <input type="submit" placeholder="登录">
</form>

下面是05.2.php页面的内容：

<?php
    echo "这个为post提交的页面";
    echo $_POST['userName'];
    echo '<h1>'.$_POST['userName'].'欢迎你</h1>';   
        //在php中字符串拼接使用的是.
?>    

输入 jj  结果如下：

如果使用get方式传递数据，则在php页面中使用$_GET['']方法。

第二种：通过ajax向后台传输数据。

如下例子：

原生js版的，使用ajax发送get请求：

html页面代码：

用户名：<input type="text" id="username">
            <span id="ts"></span>
            <button id="btn">验证用户名</button>
<script>
    var username = document.getElementById("username");
    var ts= document.getElementById("ts");
    var btn = document.getElementById("btn");
        // 点击btn发送ajax请求。分为四小步
    btn.onclick = function(){
        // 1.创建xhr。由于兼容性问题，需要考虑IE5、IE6。
        var xhr;
        if(window.XMLHttpRequest){    //常规写法
        xhr = new XMLHttpRequest();
        }else{   //IE5、IE6写法
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 2.绑定监听函数。通过状态码readyState（0: 请求未初始化，1: 服务器连接已建立，2: 请求已接收，3: 请求处理中，4: 请求已完成，且响应已就绪） 和 响应码（1xx：信息类；2xx：成功（200）；3xx：重定向（304）；4xx客户端错误（404）；5xx：服务端错误（502） ）
        xhr.onreadystatechange = function(){
        　　if(xhr.readyState == 4 && xhr.status == 200){
            　　if(xhr.responseText == 1){   //responseTest：获得字符串形式的响应数据 。0和1 为php页面的输出文字，以此为判断条件。
            　　ts.innerHTML = "该用户名已经被注册"
            　　}else if(xhr.responseText == 0){
            　　ts.innerHTML = "该用户名可以使用"
            　　}
         　　}
         }          
         // 3.建立连接
         xhr.open("GET","08.php?uname=" + username.value,true);
         // 4.发送请求
         xhr.send()
    }   
</script>         

08.php 页面代码：

<?php
    $db = ['jack','mack','mary'];   //模拟数据库
    $username = $_GET['uname'];  //表示从前台传递过来的参数
    $flag = false;
    foreach($db as $n){
        if($n === $username){
            $flag = true;
            break;
        }
    }
    if($flag){
        echo "1";
    }else{
        echo "0";
    }
?>

以此来达到 通过后台数据库（$db）中是否有输入框中相同的名字来判断账号是否注册。并提示对应的提示文字。

原生js版的，使用ajax发送post请求：

html部分只有第三步和第四步有所不同

//第三步:
xhr.open('POST','http://localhost:端口号/资源文件/08.php',true);
//第三步和第四步中间还要加上一步： 在发送post请求的时候，你得告诉服务器你发送的是一个什么
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//第四步：
xhr.send('strName=' + uname.value);
//如果传递的数据不只一个，通过字符串连接的方式继续添加。比如  :  + '&strPassword=' + password.value

对应的php页面获取数据的方法也改为$_POST['strName']。功能根据需要修改。

jQuery版，使用ajax发送get请求：

html页面：

$("#btn").click(function(){
     $.ajax({
         type : "GET",
         url : "08.php?uname=" + $("#username").val(),
         success : function(data){   //data就是原生的xhr.responseTextif(data == 0){
                 $("#ts").html("该用户名可以使用").css("color","green");
             }else if(data == 1){
                 $("#ts").html("该用户名已被占用").css("color","red");
             }
         },
         error : function(err){    //错误的
             console.log(err)
         }
     })
})

php页面和原生jsPHP页面相同。

jQuery版，使用ajax发送post请求：

和get相似，有一些区别：

//type：
type : "POST",
//url:
url : "php页面地址"
//由于数据传递不通过域名传递，需要创建一个对象来传递数据。
data：{
      uname ： $("#username").val()  
},

其他相同。