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

半城伤御伤魂 提交于 2021-02-08 12:28:46

为了前端与后台进行交互,我们使用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()  
},

其他相同。

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!