ajax传参

最新推荐文章于 2024-04-10 23:38:45 发布

weixin_53150299

最新推荐文章于 2024-04-10 23:38:45 发布

阅读量159

点赞数

文章标签： ajax okhttp 前端

本文链接：https://blog.csdn.net/weixin_53150299/article/details/132070512

版权

传参复习

post请求的参数不会出现在地址栏上

(1)&连接的key=value，适用于GET和POST请求，此时contentType必须为application/x-www-form-urlencoded，后端不能使用@RequestBody注解
(2)json对象，适用于GET和POST请求，且此时contentType必须为application/x-www-form-urlencoded，ajax会自动将 json对象转化为&连接的key=value格式的数据，GET请求就拼接在url后面，POST请求就放入post请求体中，后端不能使用@RequestBody注解

json对象：

            obj = {
                "number": obj.number,
                "password": obj.password,
                "name": obj.name,
                "identity": obj.identity,
                "major": obj.major,
                "unit": obj.unit,
                "gender": obj.gender,
                "age": parseInt(obj.age),
                "id_number": obj.id_number
            };

(4)json字符串，只适用于POST请求，且此时contentType必须为application/json，后端必须使用@RequestBody注解

post请求体

HTTP请求中 header query 和 body的区别

header显而易见是请求头

query是指请求的参数，一般是指URL中？后面的参数

如http://10.6.6.6:8080/api/v1/namespaces?pretty=true中 pretty=true就是query

body是指请求体中的数据

前端发送请求最常用的是get请求还有post请求
get请求只能传query参数，query参数都是拼在请求地址上的
post可以传body和query两种形式的参数

body的类型

application/x-www-form-urlencoded

就是application/x-www-from-urlencoded,会将表单内的数据转换为键值对，比如,name=Java&age = 23

multipart/form-data

这又是一个常见的 POST 数据提交的方式，一般用做文件提交
就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"

title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

这个例子稍微复杂点。首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。然后 Content-Type 里指明了数据是以 multipart/form-data 来编码，本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 --boundary 开始，紧接着是内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 --boundary-- 标示结束。

application/json

application/json 。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。
raw

可以上传任意格式的文本，可以上传text、json、xml、html等

binary

相当于Content-Type:application/octet-stream,从字面意思得知，只可以上传二进制数据，通常用来上传文件，由于没有键值，所以，一次只能上传一个文件。

multipart/form-data与x-www-form-urlencoded区别

multipart/form-data：既可以上传文件等二进制数据，也可以上传表单键值对，只是最后会转化为一条信息；

x-www-form-urlencoded：只能上传键值对，并且键值对都是间隔分开的

ajax传参

Ajax的全称是Asynchronous JavaScript and XML（是异步的 javascript 和 XML），

　　通过后台少量的数据交换实现不刷新网页从而进行网页动态的技术，ajax就可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

　　Ajax能传输的数据格式一共有三种，HTML格式，XML格式，JSON格式

HTML格式

　使用HTML传输格式，最大特点是要使用DOM方法，获取结点，通过结点进行操作使用innerHTML进行对DOM标签的值写入，从而实现异步更新

　　首先放HTML代码，下面的文件是从这一段代码来获取数据的

1 <h2><a >Andy</a></h2>
2 <a>aaaaaa</a>

首先要获取到对象的onlick方法，并且retuen fales这样做的目的是为了废除让a标签的跳转方法

　　然后按一下几个步骤执行

　　1.创建一个XMLHttpRequest对象

　　2.准备发送的数据，一般准备两个一个URL一个Method

　　3.调用XMLHttpRequest对象的Open方法，和Send方法，为了方便记忆，这里为了方便理解我所认为就是Open就是准备阶段，send就是发送。

　　4.调用XMLHttpRequest对象的onreadystatechange()方法，这个方法会和数据或者服务器进行交互，并且这个过程会有4部，只有当XMLHttpRequest对象的readyState为4的时候表示交互完成

　　5.调用XMLHttpRequest对象的status方法，这个对象代表的网页状态比如404（找不到网页），500（服务器内部错误），200（成功），

　　6操作DOM对标签的值进行写入XMLHttpRequest对象的responseText就是返回的文本

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>Ajax HTML格式传输</title>
    <script type="text/javascript">
        window.onload = function(){
            //1.获取a结点，并为其添加相应的onclick函数
            document.getElementsByTagName("a")[0].onclick = function(){
            //3.创建一个XMLHttpRequest对象
            var request = null;
            request = new XMLHttpRequest();
            //4.准备发送的数据:url
            var url =this.href ;
            var method = "GET";
            //5.调用XMLHttpRequest的  Open 方法
            request.open(method, url);
            //6.调用XMLHttpRequest的 send  方法
            request.send(null);
            //7.为XMLHttpRequset 对象添加onreadystatechange相应函数
            request.onreadystatechange = function(){
                //8.用requset对象的readyState方法判断是否进行到了第四步
                if(request.readyState == 4){
                        //9.用requset对象的status判断页面请求是否成功
                        if(request.status == 200 || request == 304){
                            //2.获取到输入信息结点并放入返回的值
                            document.getElementById("andy").innerHTML = request.responseText;
                        }
                    }
                }
                return false;
            }
        }
    </script>
  </head>

  <body>
      <a href="files/Ajax_HTML.html">andy</a>
      <div id="andy"></div>
  </body>
</html>

XML格式

我认为，XML操作比HTML操作更为复杂，比上面就多了一个XML解析而已。

过程基本相同，只不过HTML传输格式传输使用responseText,而这里通过responseXML来获取XML文档，然后解析或者子节点的值在对DOM进行操作。

1 <?xml version="1.0" encoding="UTF-8"?>
2 <detalis>
3      <name>Andy</name>
4      <text>hahahahahaah</text>
5 </detalis>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>Ajax XML格式传输</title>
    <script type="text/javascript">
        window.onload = function(){
            //1.获取a结点，并为其添加相应的onclick函数
            document.getElementsByTagName("a")[0].onclick = function(){
            //3.创建一个XMLHttpRequest对象
            var request =  new XMLHttpRequest();
            //4.准备发送的数据:url
            var url =this.href ;
            var method = "GET";
            //5.调用XMLHttpRequest的  Open 方法
            request.open(method, url);
            //6.调用XMLHttpRequest的 send  方法
            request.send(null);
            //7.为XMLHttpRequset 对象添加onreadystatechange相应函数
            request.onreadystatechange = function(){
                //8.用requset对象的readyState方法判断是否进行到了第四步
                if(request.readyState == 4){
                        //9.用requset对象的status判断页面请求是否成功
                        if(request.status == 200 || request == 304){
                            //结果是XML格式，所以需要使用respinseXML来获取
                            var result =request.responseXML;
                            //结果不能使用来先创建对应的结点再将结果加入到#Andy中
                            /*
                            目标格式为
                            <h2><a >Andy</a></h2>
                            <a>aaaaaa</a>
                            */
                            var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
                            var text = result.getElementsByTagName("text")[0].firstChild.nodeValue;
                            //alter(name);
                            //alter(text);
                            var nodea = document.createElement("a");
                            nodea.appendChild(document.createTextNode(name));
                            var nodeaa = document.createElement("a");
                            nodeaa.appendChild(document.createTextNode(text));
                            var andy = document.getElementById("andy");
                            andy.appendChild(nodea);
                            andy.appendChild(nodeaa);
                        }
                    }
                }
                return false;
            }
        }
    </script>
  </head>

  <body>
      <a href="files/Ajax_XML.xml">andy</a>
      <div id="andy"></div>
  </body>
</html>

json格式

比如，这就是一会要用的js文件

 {"person":{  "name":"andy",  "text":"hahahaha"  }  }

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>Ajax XML格式传输</title>
    <script type="text/javascript">
        window.onload = function(){
            //1.获取a结点，并为其添加相应的onclick函数
            document.getElementsByTagName("a")[0].onclick = function(){
            //3.创建一个XMLHttpRequest对象
            var request =  new XMLHttpRequest();
            //4.准备发送的数据:url
            var url =this.href ;
            var method = "GET";
            //5.调用XMLHttpRequest的  Open 方法
            request.open(method, url);
            //6.调用XMLHttpRequest的 send  方法
            request.send(null);
            //7.为XMLHttpRequset 对象添加onreadystatechange相应函数
            request.onreadystatechange = function(){
                //8.用requset对象的readyState方法判断是否进行到了第四步
                if(request.readyState == 4){
                        //9.用requset对象的status判断页面请求是否成功
                        if(request.status == 200 || request == 304){

                            var result =request.responseText;
                            var object = eval( "(" + result + ")" );
                            //结果不能使用来先创建对应的结点再将结果加入到#Andy中
                            /*
                            目标格式为
                            <h2><a >Andy</a></h2>
                            <a>aaaaaa</a>
                            */
                            var name = object.person.name;
                            var text = object.person.text;
                            //alter(name);
                            //alter(text);
                            var nodea = document.createElement("a");
                            nodea.appendChild(document.createTextNode(name));
                            var nodeaa = document.createElement("a");
                            nodeaa.appendChild(document.createTextNode(text));
                            var andy = document.getElementById("andy");
                            andy.appendChild(nodea);
                            andy.appendChild(nodeaa);
                        }
                    }
                }
                return false;
            }
        }
    </script>
  </head>

  <body>
      <a href="files/Ajax_json.js">andy</a>
      <div id="andy"></div>
  </body>
</html>

ajax在xmlHttp对象的一个事件上注册监听器：onreadystatechange

xmlHttp对象共有5个状态：

0状态：刚创建，还没有调用open（）方法；

1状态：请求开始，调用了open（）方法，但还没有调用send（）方法；

2状态：调用完send（）方法；

3状态：服务器已经开始响应，但不表示响应结束；

4状态：服务器响应结束；

l 得到xmlHttp对象的状态：

var state=xmlHttp.readyState;

l 得到响应的状态码：

var status=xmlHttp.status;

l 得到服务器响应的内容

var content=xmlHttp.responseText;//得到服务器的响应的文本格式内容；

var content=xmlHtto.responseXML;//得到服务器响应的XML内容，即Document对象；

xmlHttp.onreadystatechange=function(){//这是xmlHttp的5种状态都会调用的方法

if（xmlHttp.readystate==4&&xmlHttp.status==200）{//双重判断：判断是否为4状态，且要判断是否为200//获取服务器的响应内容

vartext=xmlHttp.reponseText;}};

ajax传参标准格式

1.json格式形如：
{“username”:”chen”,”nickname”:”alien”}

$.ajax({
	type: "post",
	url: "/test/saveUser",
	data: {
		"username": "chen",
		"nickname": "alien"
	},
	dataType: "json",
	success: function(data) {
		console.log(data);
	}
});

形如：
“{“username”:”chen”,”nickname”:”alien”}” 或者JSON.stringify({“username”:”chen”,”nickname”:”alien”})

$.ajax({
	type: "post",
	url: "/test/saveUser",
	data: JSON.stringify({
		"username": "chen",
		"nickname": "alien"
	}),
	contentType: "json/application"
	dataType: "json",
	success: function(data) {
		console.log(data);
	}
});

用此格式get请求参数传递不过去，不会把json串解析成参数
而且需要添加 contentType:”json/application”

形如：
“username=chen&nickname=alien

$.ajax({
	type: "post",
	url: "/test/saveUser",
	data: "username=chen&nickname=alien",
	dataType: "json",
	success: function(data) {
		console.log(data);
	}
});

weixin_53150299

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax传参

消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 --boundary 开始，紧接着是内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。(2)json对象，适用于GET和POST请求，且此时contentType必须为application/x-www-form-urlencoded，ajax会自动将 json对象转化为&连接的key=value格式的数据，GET请求就拼接在url后面，POST请求就放入post请求体中，后端不能使用@RequestBody注解。
复制链接

扫一扫