jQuery Ajax请求基础

最新推荐文章于 2024-04-14 19:22:53 发布

YXGR

最新推荐文章于 2024-04-14 19:22:53 发布

阅读量3.9k

点赞数 6

本文链接：https://blog.csdn.net/weixin_42777688/article/details/89218955

版权

前端同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

JavaScript

16 篇文章 0 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

jQuery Ajax请求基础

Ajax是前端开发中非常常用的API之一,因此写个文章记录一下如何使用jQuery中的Ajax
请求

准备jQuery

jQuery下载地址

下载jQuery

Ajax参数说明

名称	类型	默认值	可选参数	说明
url	String	当前页面	发送请求的地址	发送请求的地址
type	String	GET	GET/POST	请求方式
timeout	Number	无/参数小于零则不开启		请求超时的毫秒数
async	Boolean	true	true/false	异步请求/同步请求
cache	Boolean	true(当dataType为Script时，默认为false)	true/false	是否从缓存中加载请求信息
dataType	String	自动	xml/html/script/json/jsonp/text	返回的数据类型
data	String/Object	无	任意	传递的参数
beforeSend	Function	无	Function	发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。
complete	Function	无	Function	请求完成后调用的回调函数（请求成功或失败均调用）
success	Function	无	Function	请求成功后调用的回调函数
error	Function	无	Function	请求失败时被调用的函数
contentType	String	application/x-www-form-urlencoded"		该默认值适合大多数应用场合
dataFilter	Function	无	Function	给Ajax返回的原始数据进行预处理的函数
global	Boolean	true	true/false	表示是否触发全局ajax事件
ifModified	Boolean	false	true/false	仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息
jsonp	Sring	无	函数名	要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:‘onJsonPLoad’}会导致将"onJsonPLoad=?"传给服务器。
username	String	无	String	用于响应HTTP访问认证请求的用户。
password	String	无	String	用于响应HTTP访问认证请求的密码。

前端页面

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Ajax请求</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="/stylesheets/index.css">
	<script src="https://code.jquery.com/jquery-3.3.0.min.js"></script>
	<script src="/javascripts/index.js"></script>
</head>
<body>
	<div id="form">
		<input class="search" type="text" placeholder="请输入值" AUTOCOMPLETE="off">
		<button class="submit" type="button" >发起请求</button>
	</div>
</body>
</html>

css样式

#form {
    width: 600px;
    margin: 100px auto;
}
.search {
    width: 480px !important;
    height: 38px;
    box-sizing: border-box;
    padding-right: 48px !important;
}
.submit {
    cursor: pointer;
    width: 102px;
    height: 38px;
    line-height: 38px;
    padding: 0;
    border: 0;
    background: none;
    background-color: #38f;
    font-size: 16px;
    color: white;
    box-shadow: none;
    font-weight: normal;
}

GET请求

JavaScript代码

$(function () { 
    $(".submit").on("click", function () {
        var sub = $(".search").val()	//拿到输入框的值
        $.ajax({
            type: "GET",    //请求类型 
            url: "/test/ajax?name="+sub,    //请求地址和参数    GET请求才把参数写在这里
            success: function (res) {   //请求成功后执行的函数res是返回的值
                console.log(res)
            }
        });
    });
});

效果

GET请求

POST请求

JavaScript代码

$(function () { 
    $(".submit").on("click", function () {
        var sub = $(".search").val()
        $.ajax({
            type: "POST",    //请求类型
            url: "/test/ajax",    //请求地址和参数    GET请求才把参数写在这里
            data:{name:sub},    //POST请求的参数以JSON格式传参
            success: function (res) {   //请求成功后执行的函数res是返回的值
                console.log(res)
            }
        });
    });
});

效果

POST

后端代码(nodejs)

ar express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function (req, res, next) {
    var name = req.query.name;
    var pwd = "123456"
    res.send({"name":name,"pwd":pwd,"type":"GET"});
});
router.post('/',function (req, res, next) {
    var name = req.body.name;
    var pwd = "123456"
    res.send({"name":name,"pwd":pwd,"type":"POST"});
 })

module.exports = router;

补充说明

Ajax请求所使用的是HTTP协议必须在容器中运行才能发送请求

YXGR

关注

6
点赞
踩
28

收藏

觉得还不错? 一键收藏
1
评论
jQuery Ajax请求基础

jQuery Ajax请求基础Ajax是前端开发中非常常用的API之一,因此写个文章记录一下如何使用jQuery中的Ajax请求1.准备jQueryjQuery下载地址下载jQuery前端页面<!DOCTYPE html><html><head> <title>jQuery Ajax请求</title> <...
复制链接

扫一扫