ajax再学

其他 2019-04-19 21:18:43 阅读次数: 0

https://blog.csdn.net/qq_43553067/article/details/88760221 放上之前整理的笔记 以便自己可以随时翻看

  • 完整的HTTP请求过程
  1. 建立TCP接连
  2. Web浏览器向Web服务器发送请求命令
  3. Web浏览器发送请求头信息
  4. Web服务器应答
  5. Web服务器发送应答头信息
  6. Web服务器向浏览器发送数据
  7. Web服务器关闭TCP连接

这里想记录一下 ajax原生,jq，axios，vue-resource

原生ajax

php后端

<?php
//设置页面内容是html编码格式是utf-8
header("Content-Type: text/plain;charset=utf-8"); 
//header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 
//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
 (
  array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
  array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
  array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
 );
//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
 search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
 create();
}
//通过员工编号搜索员工
function search(){
 //检查是否有员工编号的参数
 //isset检测变量是否设置；empty判断值为否为空
 //超全局变量 $_GET 和 $_POST 用于收集表单数据
 if (!isset($_GET["number"]) || empty($_GET["number"])) {
  echo "参数错误";
  return;
 }
 //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
 //global 关键词用于访问函数内的全局变量
 global $staff;
 //获取number参数
 $number = $_GET["number"];
 $result = "没有找到员工。";
 //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
 foreach ($staff as $value) {
  if ($value["number"] == $number) {
   $result = "找到员工：员工编号：" . $value["number"] . "，员工姓名：" . $value["name"] . "，员工性别：" . $value["sex"] . "，员工职位：" . $value["job"];
   break;
  }
 }
    echo $result;
}
//创建员工
function create(){
 //判断信息是否填写完全
 if (!isset($_POST["name"]) || empty($_POST["name"])
  || !isset($_POST["number"]) || empty($_POST["number"])
  || !isset($_POST["sex"]) || empty($_POST["sex"])
  || !isset($_POST["job"]) || empty($_POST["job"])) {
  echo "参数错误，员工信息填写不全";
  return;
 }
 //TODO: 获取POST表单数据并保存到数据库
 //提示保存成功
 echo "员工：" . $_POST["name"] . " 信息保存成功！";
}

前端页面只有简单的表单 目的主要是ajax

<h1>员工查询</h1>
<label>请输入员工编号:</label>
<input type="text" id="keyword"/>
<button id="search">查询</button>
<p id="searchResult"></p>
<h1>员工创建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName"/><br />
<label>请输入员工编号：</label>
<input type="text" id="staffNumber"/><br />
<label>请输入员工性别：</label>
<select id="staffSex">
<option>男</option>
<option>女</option>
</select><br />
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br />
<button id="save">保存</button><br />
<p id="createResult"></p>

<script type="text/javascript">
 var select = document.getElementById("search");
 var save = document.getElementById("save");
 var keyword = document.getElementById("keyword");
 var searchResult = document.getElementById("searchResult");
 var createResult = document.getElementById("createResult");
 //method为get时
 select.onclick = ajax;
 function ajax(){
  	var xmlhttp;
 	if(window.XMLHttpRequest){
   		xmlhttp = new XMLHttpRequest();
  	}else{
   		xmlhttp = new ActiveXObject("Microsoft.XMLHttp");//IE
  	}
  	//注册事件
  	xmlhttp.onreadystatechange = function(){
   		if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
    			searchResult.innerHTML = xmlhttp.responseText;
   		}
  	};
  	xmlhttp.open("GET","server.php?number="+keyword.value);
  	xmlhttp.send();
 }
 //method为post
 save.onclick = createAjax;
 function createAjax(){
  	var xmlhttp;
  	if(window.XMLHttpRequest){
   		xmlhttp = new XMLHttpRequest();
  	}else{
   		xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
  	};
 	xmlhttp.open("POST","server.php");
  	var data = "name=" + document.getElementById("staffName").value
     	+ "&number=" + document.getElementById("staffNumber").value
     	+ "&sex=" +document.getElementById("staffSex").value
    	+ "&job=" + document.getElementById("staffJob").value;
  	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  	xmlhttp.send(data);
  	xmlhttp.onreadystatechange = function(){
   		if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
    		createResult.innerHTML = xmlhttp.responseText;
   		}
  	}
}
 
</script>
  1. 如果需要像表单一样post数据，就要把参数传到send方法中。需要注意的是当使用post方法时一定要记得写setRequestHeader,并且要写在send和open中间

解析json

  • eval解析json
var jsondata = '{"staff":[{"name":"陈莉莉","age":20},{"name":"林小鹏","age":21},{"name":"嘻嘻",age:28}]}';
var jsonobj = eval( '('+ jsondata + ')');
alert(jsonobj.staff[0].name); //陈莉莉
  • JSON.parse解析json
var jsondata = '{"staff":[{"name":"陈莉莉","age":20},{"name":"林小鹏","age":21},{"name":"嘻嘻","age":28}]}';
var jsonobj = JSON.parse(jsondata);
alert(jsonobj.staff[0].name);

报错:Uncaught SyntaxError: Unexpected token a in JSON at position 71
at JSON.parse ()at test1.html:17

JSON.parse() 从一个字符串中解析出json对象

var str = '{"name":"陈莉莉","age":18}';
var strobj = JSON.parse(str);
console.log(strobj);

输出

在这里插入图片描述
如果在JSON.parse中传入一个对象，

var str2 = {name:"陈莉莉",age:20};
var str2obj = JSON.parse(str2);
console.log(str2obj);//报错VM21:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1at JSON.parse (<anonymous>)at test1.html:30

报错原因：如果把object作为参数传入到JSON.parse()里，它会默认把object转为string，就会先调用原型上的toString()方法;结果为”[object Object]”，JSON.parse将第一个字符’[‘理解为数组的开始，第二字符’o’不知道怎么处理;所以就抛出了上面的错误信息 Unexpected token o in JSON at position 1。

后来检查出来是因为我age漏打了双引号，但是还是学到了~~
用eval解析json时，不会去检查json字符串是否合法，而且也会直接解析json中的方法，这是有危险的。
例如:

var jsondata = '{"staff":[{"name":"陈莉莉","age":alert(123)},{"name":"林小鹏","age":21},{"name":"嘻嘻",age:28}]}';
var jsonobj = eval( '('+ jsondata + ')');
alert(jsonobj.staff[0].name);

以上代码会先alert123，再alert陈莉莉。也就是说json会直接解析json中的方法
而在json.parse中这样操作则会报出错误
在这里插入图片描述
json.parse会检查json格式的正确性！

扫描二维码关注公众号，回复： 5948850 查看本文章

json字符串校验: http://jsonlint.cn/ 格式化和校验工具

jquery ajax

这里针对php后端做了一些改变,主要增加了success:false/true

<?php
//设置页面内容是html编码格式是utf-8
//header("Content-Type: text/plain;charset=utf-8"); 
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');
header('Access-Control-Allow-Credentials:true'); 
header("Content-Type: application/json;charset=utf-8"); 
//header("Content-Type: text/xml;charset=utf-8"); 
//header("Content-Type: text/html;charset=utf-8"); 
//header("Content-Type: application/javascript;charset=utf-8"); 
//定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array
 (
  array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
  array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
  array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
 );
//判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if ($_SERVER["REQUEST_METHOD"] == "GET") {
 search();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
 create();
}
//通过员工编号搜索员工
function search(){
 //检查是否有员工编号的参数
 //isset检测变量是否设置；empty判断值为否为空
 //超全局变量 $_GET 和 $_POST 用于收集表单数据
 if (!isset($_GET["number"]) || empty($_GET["number"])) {
  echo '{"success":false,"msg":"参数错误"}';
  return;
 }
 //函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
 //global 关键词用于访问函数内的全局变量
 global $staff;
 //获取number参数
 $number = $_GET["number"];
 $result = '{"success":false,"msg":"没有找到员工。"}';
 //遍历$staff多维数组，查找key值为number的员工是否存在，如果存在，则修改返回结果
 foreach ($staff as $value) {
  if ($value["number"] == $number) {
   $result = '{"success":true,"msg":"找到员工：员工编号：' . $value["number"] . 
       '，员工姓名：' . $value["name"] . 
       '，员工性别：' . $value["sex"] . 
       '，员工职位：' . $value["job"] . '"}';
   break;
  }
 }
    echo $result;
}
//创建员工
function create(){
 //判断信息是否填写完全
 if (!isset($_POST["name"]) || empty($_POST["name"])
  || !isset($_POST["number"]) || empty($_POST["number"])
  || !isset($_POST["sex"]) || empty($_POST["sex"])
  || !isset($_POST["job"]) || empty($_POST["job"])) {
  echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
  return;
 }
 //TODO: 获取POST表单数据并保存到数据库
 //提示保存成功
 echo '{"success":true,"msg":"员工：' . $_POST["name"] . ' 信息保存成功！"}';
}
?>

jquery实现ajax

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#search").click(function(){
   	//GET方法
   	$.ajax({
    		type:"GET",
    		url: "server.php?number=" + $("#keyword").val(),
    		datatype:"json",
    		success:function(data){
     			if(data.success){
      				$("#search").html(data.msg);
     			}else{
      				$("#search").html("出现错误" + data.msg);
     			}
    		},
    		error:function(jqXHR){
     			alert("发生错误:" + jqXHR.status);
    		}	
   	})
  }); 
  //POST方法
  $("#save").click(function(){
   	$.ajax({
    		type:"POST",
    		url: "server.php",
    		datatype:"json",
    		data:{
     		name:$("#staffName").val(),
     		number:$("#staffNumber").val(),
     		sex:$("#staffSex").val(),
     		job:$("#staffJob").val()
   		},
    		success:function(data){
     			if(data.success){
      				$("#createResult").html(data.msg);
     			}else{
      				$("#createResult").html("出现错误" + data.msg);
     			}
    		},
    		error:function(jqXHR){
     			alert("发生错误:" + jqXHR.status);
    		}
   	})
  }); 
});
</script>

猜你喜欢

转载自blog.csdn.net/qq_43553067/article/details/88912667
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022