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()
},

其他相同。