返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Jquery使用原生AJAX方法请求数据
  • 917
分享到

Jquery使用原生AJAX方法请求数据

JqueryAJAX请求数据JqueryAJAX方法 2023-02-22 12:02:32 917人浏览 独家记忆
摘要

目录1.原生ajax1.具体步骤2.get请求3.post请求4.封装方法2.Jquery的ajax方法1.原生ajax 1.具体步骤 1.创建XMLHttpRequest对象 2.

1.原生ajax

1.具体步骤

1.创建XMLHttpRequest对象

2.使用open方法设置和服务器的交互信息

3.设置发送的数据,开始和服务器端交互

4.注册事件

5.更新界面

2.get请求

//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.PHP?starName='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
    console.log(ajax.responseText);//输入相应的内容
    }
}

3.post请求

//创建异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-fORM-urlencoded");
 xhr.open('post', '02.post.php' );
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  } 
};

4.封装方法

为了方便使用,封装一个方法

function ajax_method(url,data,method,success) {
    // 异步对象
    var ajax = new XMLHttpRequest();
    // get 跟post  需要分别写不同的代码
    if (method=='get') {
        // get请求
        if (data) {
            // 如果有值
            url+='?';
            url+=data;
        }else{
        }
        // 设置 方法 以及 url
        ajax.open(method,url);
        // send即可
        ajax.send();
    }else{
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method,url);
        // 需要设置请求报文
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            ajax.send(data);
        }else{
            // 木有值 直接发送即可
            ajax.send();
        }
    }
    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);
            // 将 数据 让 外面可以使用
            // return ajax.responseText;
            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;
            // 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);
        }
    }
}

2.jquery的ajax方法

 login.addEventListener('click', () => {
        // if (username.value == uname && passWord.value == upw) {
        $.ajax({
            type: 'post',				// 请求方式
            url: 'http://127.0.0.1:3007/api/login',		// 路径
            // contentType: "application/JSON",
            dataType: 'json',		// 这里是指定了参数的类型
            data: {
                'username': username.value,
                'password': password.value
            }
            ,
            success: function (res) {
                console.log(res);
                // var yanzheng = { status: 0, message: '登录成功!' }
                if (res.status == 0) {
                    alert('登录成功');
                    self.location.href = "index.html?id=" + res.id;
                }
                else {
                    alert('请输入正确的用户名或密码')
                }
            }
        })
    })

参数

options

类型:Object

可选。AJAX 请求设置。所有选项都是可选的。

async

类型:Boolean

默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。

注意,同步请求将住浏览器,用户其它操作必须等待请求完成才可以执行。

beforeSend(XHR)

类型:Function

发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。

cache

类型:Boolean

默认值: true,dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

jQuery 1.2 新功能。

contentType

类型:String

默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。

context

类型:Object

这个对象用于设置 Ajax 相关回调函数的上下文。也就是说,让回调函数内 this 指向这个对象(如果不设定这个参数,那么 this 就指向调用本次 AJAX 请求时传递的 options 参数)。比如指定一个 DOM 元素作为 context 参数,这样就设置了 success 回调函数的上下文为这个 DOM 元素。

就像这样:

$.ajax({ url: "test.html", context: document.body, success: function(){
        $(this).addClass("done");
      }});

data

类型:String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataFilter

类型:Function

给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

dataType

类型:String

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 javascript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

  • “xml”: 返回 XML 文档,可用 jQuery 处理。
  • “html”: 返回纯文本 HTML 信息;包含的 script标签会在插入 dom 时执行。
  • “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache"参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的script标签来加载)
  • “json”: 返回 JSON 数据 。
  • “jsonp”: JSONP 格式。使用 JSONP形式调用函数时,如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
  • “text”: 返回纯文本字符串

error

类型:Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。

如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

这是一个 Ajax 事件。

global

类型:Boolean

是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

jsonp

类型:String

在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 “callback=?” 这种 GET 或 POST 请求中 URL 参数里的 “callback” 部分,比如 {jsonp:‘onJsonPLoad’} 会导致将 “onJsonPLoad=?” 传给服务器。

success

类型:Function

请求成功后的回调函数。

参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。

这是一个 Ajax 事件。

traditional

类型:Boolean

如果你想要用传统的方式来序列化数据,那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。

timeout

类型:Number

设置请求超时时间(毫秒)。此设置将覆盖全局设置。

type

类型:String

默认值: “GET”)。请求方式 (“POST” 或 “GET”), 默认为 “GET”。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

url

类型:String

默认值: 当前页地址。发送请求的地址。

error

在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)

dataFilter

在请求成功之后调用。传入返回的数据以及 “dataType” 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。

success

当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。

complete

当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。

到此这篇关于Jquery使用原生AJAX方法请求数据的文章就介绍到这了,更多相关Jquery AJAX方法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Jquery使用原生AJAX方法请求数据

本文链接: https://lsjlt.com/news/197072.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Jquery使用原生AJAX方法请求数据
    目录1.原生ajax1.具体步骤2.get请求3.post请求4.封装方法2.jquery的ajax方法1.原生ajax 1.具体步骤 1.创建XMLHTTPRequest对象 2....
    99+
    2023-02-22
    Jquery AJAX请求数据 Jquery AJAX方法
  • Jquery怎么使用原生AJAX方法请求数据
    这篇文章主要介绍“Jquery怎么使用原生AJAX方法请求数据”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Jquery怎么使用原生AJAX方法请求数据”文章能帮助大家解决问题。1.原生ajax1....
    99+
    2023-07-05
  • Jquery使用AJAX方法请求数据
    一、AJAX请求 1、jQuery.ajax(url,[settings]): 通过 HTTP 请求加载远程数据。 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.ge...
    99+
    2024-04-02
  • Jquery怎么使用AJAX方法请求数据
    本篇内容主要讲解“Jquery怎么使用AJAX方法请求数据”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Jquery怎么使用AJAX方法请求数据”吧!一、AJAX请求1、jQuery.ajax(...
    99+
    2023-06-30
  • 如何实现JavaScript原生封装ajax请求和Jquery中的ajax请求
    小编给大家分享一下如何实现JavaScript原生封装ajax请求和Jquery中的ajax请求,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1、原生ajax(1)html前端代码get请...
    99+
    2024-04-02
  • 原生js+jquery+ajax请求以及jsonp如何调用
    这篇文章主要为大家展示了“原生js+jquery+ajax请求以及jsonp如何调用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“原生js+jquery+aja...
    99+
    2024-04-02
  • jQuery非Ajax的POST请求方法怎么使用
    这篇文章主要介绍了jQuery非Ajax的POST请求方法怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jQuery非Ajax的POST请求方法怎么使用文章都会有所收获,下面我们一起来看看吧。一、AJA...
    99+
    2023-07-05
  • jQuery如何使用ajax请求
    这篇文章将为大家详细讲解有关jQuery如何使用ajax请求,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用最简单的ajax请求jQuery(使用ajax)提供了一个速...
    99+
    2024-04-02
  • jquery中如何使用ajax请求
    本文小编为大家详细介绍“jquery中如何使用ajax请求”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery中如何使用ajax请求”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新...
    99+
    2024-04-02
  • jquery中AJAX请求$.post方法的用法介绍
    本篇内容介绍了“jquery中AJAX请求$.post方法的用法介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学...
    99+
    2024-04-02
  • jQuery中怎么使用ajax跨域请求获取数据
    本篇文章给大家分享的是有关jQuery中怎么使用ajax跨域请求获取数据,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。跨域是我在日常面试中经常...
    99+
    2024-04-02
  • 如何使用JQuery接收AJAX请求
    JQuery是一个优秀的JavaScript库,支持各种浏览器下的AJAX请求。本文将介绍如何使用JQuery接收AJAX请求。一、用法JQuery提供了ajax方法来发送AJAX请求,如下:$.ajax({ //请求方式,可以为&...
    99+
    2023-05-14
  • 怎么使用JQuery接收AJAX请求
    本文小编为大家详细介绍“怎么使用JQuery接收AJAX请求”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么使用JQuery接收AJAX请求”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、用法JQuery提...
    99+
    2023-07-06
  • Vue使用ajax(axios)请求后台数据的方法教程
    目录前言:Axios安装前台部分连接后台部分(node)总结前言: 页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果。ajax可以帮助我们更好的...
    99+
    2022-11-13
    vue请求后端数据 vue ajax请求 axios请求后端数据
  • jQuery中ajax的常用请求方式有哪些
    本篇内容主要讲解“jQuery中ajax的常用请求方式有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jQuery中ajax的常用请求方式有哪些”吧!jQu...
    99+
    2024-04-02
  • 使用Ajax请求动态填充页面数据
    这期内容当中小编将会给大家带来有关使用Ajax请求动态填充页面数据,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。实现功能:点击页面上的按钮实现动态追加数据实现原理:点击页面按钮,通过Ajax提交请求到后台...
    99+
    2023-06-08
  • 解决IE9下JQuery发送ajax请求失效的方法
    最近在做项目的时候,测试PC端网页,在IE9下会失效,不能正常的发送POST请求,经过仔细的排查,发现是IE9下JQuery发送ajax存在跨域问题。 目前有两种解决方案: 解决方案...
    99+
    2024-04-02
  • 如何使用jQuery的ajax方法向服务器发出get和post请求
    这篇文章主要介绍如何使用jQuery的ajax方法向服务器发出get和post请求,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!打算写个ajax系列的博文,主要是写给自己看,学习下a...
    99+
    2024-04-02
  • 原生ajax如何调用数据
    这篇文章给大家分享的是有关原生ajax如何调用数据的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一.兼容浏览器部分function xml...
    99+
    2024-04-02
  • 如何使用JQuery对多个ajax请求串行执行
    本篇内容主要讲解“如何使用JQuery对多个ajax请求串行执行”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用JQuery对多个ajax请求串行执行”吧...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作