Ajax学习(4)--基本参数设置

181 阅读2分钟

通过URL进行一些传参

这里其实对GET或者POST方法有一定了解的同学很容易理解,就是基本的添加诸如?a=x&b=x&c=x就可以实现参数的传递,当然POST方法需要一些语法,不过基本大同小异。

1.GET方法

xhr.open('GET','http://127.0.0.1:8080/server?a=100&b=200&c=300');

image.png

更改代码后再打开谷歌浏览器点击发送,打开F12便可以查看到请求中a,b,c作为参数得到了传递。

2.POST方法

xhr.open("POST", "http://127.0.0.1:8080/server");
xhr.send('a=100');

在HTML中更新方法后可执行POST方式的传参,在send函数中传递参数。除此之外,在server.js中,需要添加apost的处理方法,以确保终端可以对POST请求进行处理。

app.post("/server", (request, response) => {
  //设置相应头
  response.setHeader("Access-Control-Allow-Origin", "*");
  response.send("this is response by post");
});

image.png

和之前一样,这次我们点击摁扭便可以发送POST请求到后端。也同样可以在控制台中查看相关信息。

3.传输JSON文件

开发过程中传递的大部分都是一个个对象,因此大多数据都用JSON格式来传递,此时我们设置xhr的格式为JSON,并在后端进行相应的处理便可以达到效果

//前端代码,这一步需要在创建xhr后,xhr初始化之前完成。
xhr.responseType = 'json';
//server文件代码
app.all("/server_json", (request, response) => {
  //设置相应头
  response.setHeader("Access-Control-Allow-Origin", "*");
  const data = {
    name:'xiaomo'
  }
  let str = JSON.stringify(data);
  response.send(str);
});

设置请求头

在开发中一般我们会在头中设置一些校验信息。基本情况下是会确定一些传输数据的格式,这些是预定义好的,而针对于开发的系统我们需要一些自定义的校验,来获取后端的“认可”,所以便有了自定义的校验。

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//确定传输数据格式
xhr.setRequestHeader('random_info','random_info');//自定义校验信息

制作不易还望各位老板点个赞