ajax发送请求(原生js和jq方式,扩展表单序列化)

已于 2023-01-09 14:46:08 修改
阅读量418 收藏
点赞数
分类专栏： jQuery js 文章标签： ajax 前端 javascript
于 2022-10-12 11:22:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68658847/article/details/127279355
版权
js 同时被 2 个专栏收录
59 篇文章 4 订阅
订阅专栏
jQuery
7 篇文章 0 订阅
订阅专栏

前提知识
post请求常用的几种数据格式:

  1. urlencoded类型:通过请求头application/x-www-form-urlencoded;charset=UTF-8 提交的数据按照key1=val1&key2=val2格式发送请求
  2. json类型:通过请求头application/json;charset=UTF-8 用来告诉服务器消息主体是序列化后的JSON字符串{‘username’:‘张三’,‘password’:‘123456’},send里面如果是对象形式需要JSON.stringify转换成json再发送,如下xhr.send(JSON.stringify({username:zs,age:23}))
  3. formdata:通过请求头multipart/form-data;charset=UTF-8 通过表单文件上传文件时的类型,如new Formdata,服务端需要安装npm i multer,安装完以后,服务端需要配置,配置如下:
const multer = require('multer')
const multer = multer()
app.get('/login',multer.none(),function(){这时候就直接拿到数据了})

客户端配置如下方式:

<form action="">
        <input type="text" name="username" placeholder="账号">
        <input type="text" name="password" placeholder="密码">
        <input type="button" onclick="xj()" value="登录">
    </form>
    <script>
       function xj(){
        let from = document.forms[0]
        // console.log(from);
        let data=new FormData(from)

        console.log(data.get('username'));//获取到输入框账号密码
        console.log(data.get('password'));
       } 
    </script>

使用方法:
原生里:

//在send函数之前设置请求头content-type，作用是用来告诉服务端，客户端传递的参数什么类型的，服务端知道客户端传递的参数类型后，根据不同的参数类型，使用不同的解析方法
//xhr发送请求的时候，content-Type是: text/pLain; charset=UTF-8，服务端不知道怎么解析参数，所以我们需修改Content-type为application/x-ww-form-urLencoded，告诉服务端传递的参数是urLencoded类型

xhr.setRequestHeader('Content-type','请求头格式;charset=UTF-8')

在这里插入图片描述

原生js发送GET请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        #__bs_notify__ {
            display: none !important;
        }

        /*上面的选择器不要删,否则内置预览会有个黑色的块,在下方写页面其他选择器*/
    </style>
</head>

<body>
    <div class="xj1">文本内容</div>
    <button class="xj2">点击修改内容</button>

    <script>
        var xj2 = document.querySelector(".xj2")
        xj2.addEventListener("click", function () {
            // 定义一个新对象
            var xj = new XMLHttpRequest();

            //open发送的响应方式和响应地址(地址为后端服务器的映射地址)
            //参数一：发送的请求方式：get或者post请求
            //参数二：响应地址(地址为后端服务器的映射地址)
            xj.open("GET", "http://stuapi.ysdjypt.com/Home/GetIP")//这里的地址为获取本地的ip地址
            //将请求发送出去
            xj.send()


            //获取访问地址响应的数据
            //当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件
            xj.onreadystatechange = function () {

                //readyState 浏览器响应的五种状态 
                //0:请求初始化，此时没有调用open的请求
                //1：请求已经建立但是还没有发送请求 send
                //2：请求发送 正在处理
                //3：请求在处理中，有部分数据可用
                //4：相应完成，可以获取浏览器的响应了

                //status：代表请求的状态
                //通常400-499为前端报错，500-599为后端报错，200为成功获取数据
                //举个例子，404为前端路径错误，500为后端代码报错崩溃


                //判断响应是否完成，并且判断是否成功获取数据
                if (xj.readyState == 4 && xj.status == 200) {
                    //满足条件，相当于数据已经有了，接下来将获取的数据写入到div中

                    //responseText代表响应的数据以文本形式获取出来

                    //document.querySelector(".xj1").innerHTML获取div的dom元素
                    document.querySelector(".xj1").innerHTML = xj.responseText
                }
            }
        })
    </script>
</body>

</html>

原生js发送post请求

后台服务器需要设置响应头,代码如下

res.setHeader('Access-Control-Allow-Origin', '*');

后台完整代码(这里使用的是node.js)

//导入web服务器http模块
const http = require("http")
//创建web 服务器实例
const sever = http.createServer((req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    if (req.method == "POST") {
        // console.log("接收到post请求了");
        res.write(JSON.stringify({ code: 2, mag: "请求成功了" }));//只是写的,但是没响应
        res.end();//代表响应结束
    }
})

//启动服务器,第一个参数代表端口号，第二个回调函数
sever.listen(80, function () {
    console.log("开启 http://127.0.0.1 这个端口号");

})

js代码

<script>
        // GET 请求方式常用于获取服务器的数据，而 POST请求方式常用于向服务器发送数据，可携带参数量较大。
        //1.创建请求连接
        var xhr = new XMLHttpRequest();
        //2.创建请求连接
        xhr.open("POST", "http://127.0.0.1")
        //3.设置请求头,用于定义请求体数据类型
        //application/x-www-form-unlencoded:告诉服务器,请求体中的数据是查询字符串的类型.'key=value&key=value'
        //application/json 代表请求体中的数据类型为json字符串格式.
        //multipart/from-data:以特定分隔符分割的数据:常用于文件上传.
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')//默认情况下,不设置请求头,请求体中的数据默认是查询字符串的类型
        //4.发送请求
        xhr.send("username=jinweizhe&password=123456");//参数为post请求方式的请求体.(可以是查询字符串数据,json字符串数据,以特定分隔符分割的数据)
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //请求请求发送完成,并且请求成功了
                let data = JSON.parse(xhr.responseText)
                console.log(data);
            }
        }
    </script>

jQueryAjax发送GET请求

例子一
 <script>
 		//$.get\$.post\$.ajax方法会返回给一个deferred类型对象;deferred:延迟
        // deferred类型对象有一个方法done,是异步操作成功的回调函数
        //deferred类型对象有一个方法fail,是异步操作失败的回调函数
        // deferred类型对象有一个方法always ,是异步操作完成的回调函数
		
		//get请求
        $.get("http://123.57.142.211:8080/api/goodList?page=1").done(function(resDate){
            //done成功的回调函数
            console.log(resDate);
            console.log("请求成功了");
        }).fail(function(e){
            //fail请求失败的回调函数
            console.log(e);
            console.log("请求失败了");
        }).always(function(c){
            //无论成功还是失败,请求完成的回调函数
            console.log("请求完成了");
        })

		//post请求
		 $.post("http://123.57.142.211:8080/api/goodList", { page: 1 }).done(function (resDate) {
            //done成功的回调函数
            console.log(resDate);
            console.log("请求成功了");
        }).fail(function (e) {
            //fail请求失败的回调函数
            console.log(e);
            console.log("请求失败了");
        }).always(function (c) {
            //无论成功还是失败,请求完成的回调函数
            console.log("请求完成了");
        })

		//通用Ajax请求
		$.ajax({
            type:"GET",
            url:"http://123.57.142.211:8080/api/goodList?page=1",
            //data:{}//post请求体数据
            //header:{}//请求头数据
        }).done(function (resDate) {
            //done成功的回调函数
            console.log(resDate);
            console.log("请求成功了");
        }).fail(function (e) {
            //fail请求失败的回调函数
            console.log(e);
            console.log("请求失败了");
        }).always(function (c) {
            //无论成功还是失败,请求完成的回调函数
            console.log("请求完成了");
        })
    </script>
例子二
<button>发请求</button>
    <script>
        $("button").click(function () {
            // $.get({})
            // $.post({})
            // $.ajax({})//通用
            //参数:配置对象,配置字段如下:
            //type:请求方式,默认get;
            //url:请求地址(get请求查询字符串需要在url+?字符串拼接,post请求参数放在请求体中)(post请求的参数放到data内)
            //headers:对象;请求头数据对象
            //success:请求成功的回调函数
            //error:请求失败的回调函数
            //complete:不管请求成功还是失败都会触发的回调函数

            // $.ajax({
            //     type: "GET",
            //     url: "http://123.57.142.211:8080/api/goodList?page=1",
            //     // data:{post请求内多参数}
            //     // data:"post请求单参数"
            //     success(resData) {
            //         console.log("请求成功");
            //         console.log(resData);
            //     },
            //     error(error) {
            //         console.log("请求失败");
            //         console.log(error);
            //     },
            //     complete() {
            //         console.log("请求完成了");
            //     }
            // })

            //get请求简写
            //参数一:url+?query
            //参数二:成功的回调函数
            // $.get("http://123.57.142.211:8080/api/goodList?page=1", function (resdata) {
            //     console.log(resdata);
            // });


            //post请求简写
            //参数一:url
            //参数二:请求体数据
            $.post("http://stuapi.ysdjypt.com//common/index", { cmdld: "xiao" },function(resdata){
                console.log(resdata);
            })
        })
    </script>

jq发送post请求

后台服务器需要设置响应头,代码如下

res.setHeader('Access-Control-Allow-Origin', '*');

后台完整代码(这里使用的是node.js)

//导入web服务器http模块
const http = require("http")
//创建web 服务器实例
const sever = http.createServer((req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');


    //post请求
    //获得请求体数据
    //需要监听请求的data事件&end事件


    //每当前端发送过来请求体数据,会触发data事件,注意:数据量大时,data事件会多次触发.
    //定义变量保存接收到的数据
    let totalData = "";
    req.on("data", (data) => {
        // console.log(data);//Buffer的格式编码了,实际上就是请求体数据
        totalData += data;
    })

    //前端请求体发送完成时会触发end事件
    req.on("end", () => {
        //decodeURI()中文解码
        console.log("请求体数据接收完毕....", decodeURI(totalData));
        let data = new URLSearchParams(decodeURI(totalData))
        console.log(data);
    })



    if (req.method == "POST") {
        console.log("接收到post请求了");
        res.write(JSON.stringify({ code: 2, mag: "请求成功了" }));//只是写的,但是没响应
        res.end();//代表响应结束
    }
})

//启动服务器,第一个参数代表端口号，第二个回调函数
sever.listen(80, function () {
    console.log("开启 http://127.0.0.1 这个端口号");

})

jq代码

 <script>
 		//第一种方式
        // $.post("http://127.0.0.1", {
        //     name: "xiaoji",
        //     sex: "男"
        // }, function (data) { 
        //     console.log(data);
        // })

        //第二种方式
        $.ajax({
            type: "POST",//请求方式
            url: "http://127.0.0.1",//请求路径
            data: {
                name: "xiaoji",
                age: 20,
                sex: "男"
            },//请求体数据,自动转换为字符串格式
            contentType: "application/x-www-form-urlencoded",//定义请求体数据类型,默认请求体数据为查询字符串格式.
            dataType: "json",//定义响应体类型(响应的数据类型,一般是json格式)
            headers: {},//请求头
            success(data) {//请求成功后的回调函数
                console.log(data);
            }
        })
    </script>

扩展表单序列化

<form action="">
        <input type="text" name="username" autocomplete="off" placeholder="请输入账号"><br>
        <input type="text" name="passworld" autocomplete="off" placeholder="请输入密码"><br>
        <input type="submit" value="登录">
    </form>
    <script>
        $("form").submit(function (e) {
            e.preventDefault();//阻止事件默认行为
            // let un = $("[name=username]").val()
            // let pwd = $("[name=passworld]").val()
            // console.log(un,pwd);

            //将数据序列化(采用特定格式组织数据),以key-value形式展现出来
            //username=123&passworld=111
            let inpVals = $(this).serialize();
            console.log(inpVals);

            //快速获取表单控件的值;注意︰表单控件必须添加name属性。否则无法获取到value。
            $.get("http://localhost:8080?" + inpVals, function (a) { console.log(a); })
        })
    </script>
萧寂173
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQ如何序列化表单注意事项
z_xqn_huang的博客
08-11 121
最近，写一个页面用到的表达序列化，然后查询使用方式，开始没注意细节问题没有成功。最后，经过一点点的排查分析，得到想要的结果，在这个分享下经验，希望对浏览的人有帮助。 1.使用场景： js文件中，我希望发送一个ajax请求给后台，获取后台反馈的信息。 提交的form表单中： <div class="modal fade" id="emps_Update_modal" tabindex="-1" role="dialog" aria-labelledby="Update_modal"> &lt
前端学习之JQ
weixin_53105591的博客
07-17 415
前端学习之jq
原生js ajax发送表单,原生JS Ajax 提交post表单信息
weixin_39567169的博客
08-06 591
var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.on...
JavaWeb AJAX请求
weixin_65637841的博客
08-02 793
AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。 Ajax 请求的局部更新，浏览器地址栏不会发生变化 局部更新不会舍弃原来页面的内容...
ajax发送请求的代码
qq_41707173的博客
03-20 1073
form.on('submit(add)', function(data){ /* 1、获取输入框的值信息 2、通过ajax请求向后端发送请求 3、根据响应反馈信息提示，并刷新主页 */ var data = data.field; $.ajax({ url:"../typeInfoSe..
简单了解Ajax表单序列化的实现方法
12-10
在Web开发中，Ajax（Asynchronous JavaScript and XML）技术被广泛...这样，通过Ajax，你可以无刷新地更新页面，同时保持表单数据的正确序列化和发送。理解并熟练掌握表单序列化是提升Web应用程序交互性的重要一环。
Ajax serialize() 表单进行序列化方式上传文件
10-19
Ajax的核心是使用JavaScript异步发送HTTP请求，而`serialize()`方法则是jQuery提供的一种方便的方式，用于将HTML表单的数据序列化为URL编码格式，以便于通过Ajax发送到服务器。然而，传统的表单提交方式对于文件上传...
原生JavaScript实现Ajax异步请求
10-18
原生JavaScript实现Ajax异步请求是前端开发中的一项基本技能，尤其在理解网络通信和优化性能时至关重要。Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），它允许网页在不重新加载整个页面的情况下...
原生JS实现ajax与ajax的跨域请求实例
11-27
总结来说，原生JS实现AJAX包括创建XMLHttpRequest对象、监听状态变化、发送请求和处理响应。而跨域请求则需要利用CORS或JSONP等机制来规避同源策略的限制。理解并掌握这些概念和方法，对于开发Web应用至关重要。
ajax请求过程
热门推荐
初漾的博客
05-09 6万+
原生态Ajax使用的步骤，最后告诉面试官，我们在工作中是使用jQuery来实现Ajax请求和处理的。在回答的时候尽量详尽，包括方法的参数的个数，顺序和作用，以免被面试官抓住不放。不给面试官提问的机会，那你的回答就牛逼了！ Ajax是什么 我理解Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。 Ajax的使用 以下步骤，如果不能理解你死记硬背都要记下来，总
关于Ajax的学习（五）
qq994849611的博客
01-17 450
使用jquery发起上传文件的请求 $.ajax({ method:'post', url:'~', data:fd 注：fd是上文向FormData中追加的文件 contentType:false, processData:false, success:function(res){ console.log(res)} }) 用jQuery实现loading效果 ajaxStart(callback) $(document).ajaxStart(function() { ..
JS原生AJAX
weixin_30270889的博客
03-30 117
ajax：一种请求数据的方式，不需要刷新整个页面； ajax的技术核心是 XMLHttpRequest 对象；ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据； 下面简单封装一个函数，之后稍作解释 1 ajax({ 2 url: "./TestXHR.aspx", //请求地址 3 ...
wpf HttpClient请求头text/xml与charset=utf-8
wangwengrui40的博客
04-24 1878
具体来说，在使用HttpClient发送POST请求时，可以先创建一个HttpRequestMessage对象，然后设置该对象的Content属性为HttpContent类型的实例，该实例可以通过XmlSerializer将要发送的数据序列化成XML格式的字符串，并用StringContent包装成HttpContent类型的实例。在WPF中使用HttpClient发送HTTP请求时，可以设置请求头以指定请求的Content-Type为"text/xml"，表示请求体的内容是XML格式的数据。
HTTP常用请求头和响应头有哪些?
似水流年QC的博客
04-20 6786
超文本传输协议（ Hypertext Transfer Protocol ，HTTP）的请求和响应消息中，协议头部分的那些组件。用来准确描述正在获取的资源、服务器或者客户端的行为，定义了HTTP事务中的具体操作参数。客户端请求（Request）或服务器响应（Response）时传递的，位请求或响应的第一行，HTTP消息体（请求或响应的内容）是其后传输。
【AJAX 学习笔记】多种方式发送AJAX请求（原生AJAX、jQuery、axios、fetch）
w的博客
08-14 1639
Ajax 学习笔记 1 AJAX相关概述 1.1 AJAX简介 AJAX 全称为Asynchronous JavaScript And XML ，就是异步的 JS 和 XML 。 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 1.2 XML简介 XML 可扩展标记语言。 XML 被设计用来传输和存储数据。（而HTML是用来呈现数据）。 XML 和 HTML 类似，不同的
ajax发送请求实例使用
qq_40132294的博客
02-28 1767
目录 局部刷新和无刷新 同源策略 1.熟悉jquery选择器， 去页面上获取发送ajax请求时的参数数据2.发送ajax请求3.将返回数据加载到页面：通过jquery操作页面元素和属性 示例：登录界面发送ajax请求 ajax技术的目的是让javascript发送http请求与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，然后使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。 局部刷新和无刷新 ajax可以实现局部.
Ajax常见请求方法（详细）
最新发布
小卡拉米的博客
01-06 4080
同源：协议，域名，端口完全相同。//CORS跨域资源共享。
jquery ajax发送请求常用代码
滕青山博客
01-14 250
【代码】jquery ajax发送请求常用代码。
Ajax 网络请求
ximingx
03-14 558
Ajax 的概念 在浏览器中，我们可以在不刷新页面的情况下，通过 Ajax 的方式去获取一些新的内容。 Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。 Ajax 原理（发送 Ajax 请求的五个步骤） 其实也就是 使用 XMLHttpRequest 对象的五个步骤。 一个完整的 HTTP 请求需要的是： 请求的网址、请求
原生js发送ajax请求
07-27
你可以使用原生的 JavaScript 发送 AJAX 请求。下面是一个示例： ```javascript var xhr = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象 xhr.open("GET", "http://api.example.com/data", true); // 设置请求方法、URL 和异步标志 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 当请求完成且成功返回时 var response = JSON.parse(xhr.responseText); // 解析响应数据 console.log(response); } }; xhr.send(); // 发送请求 ``` 在上面的示例中，我们创建了一个 `XMLHttpRequest` 对象，使用 `open` 方法设置请求方法、URL 和异步标志。然后，我们通过 `onreadystatechange` 事件处理程序来监听请求的状态变化。当 `readyState` 变为 4 并且 `status` 为 200 时，表示请求已经完成且成功返回。在这个条件下，我们可以通过 `responseText` 属性获取响应数据，并进行进一步处理。 当然，你也可以使用其他 HTTP 方法（如 POST）来发送请求，并可以在 `send` 方法中传递请求体数据。此外，你还可以在 `open` 方法中设置第三个参数为 `false`，以实现同步请求。不过，异步请求通常是更常见和推荐的做法，因为它不会阻塞浏览器的主线程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萧寂173

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值