jQuery Ajax请求基础

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访问认证请求的密码。

前端页面


<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)
            }
        });
    });
});

效果

jQuery Ajax请求基础_第1张图片

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)
            }
        });
    });
});

效果

jQuery Ajax请求基础_第2张图片

后端代码(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协议必须在容器中运行才能发送请求

你可能感兴趣的:(JavaScript,jQuery,Ajax,前端)