Jquery的ajax用法

最新推荐文章于 2022-07-08 18:53:53 发布
最新推荐文章于 2022-07-08 18:53:53 发布
阅读量287 收藏
点赞数 1
文章标签： jquery  ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ICY___/article/details/88046957
版权

这篇博客将介绍在jquery中使用ajax的用法和jsonp跨域问题。

在jquery中，共有4中常用的ajax方法：ajax        get        post     getJSON

用法相差不大

话不多说，看代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery-ajax</title>
</head>

<body>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        // ajax
        var src = "http://www.一个远程服务器的路径，或者建立一个数据库的相对应阿帕奇库中php文件路径之类";
        $.ajax({
        //     method:'post',
        //     url:src,
        //     data:'',
        //     dataType:'json',
        //     success:function(res){
        //         console.log(res);
        //     },
        //     error:function(){
        //         console.log(1); 
        //     },
        //     async:true
        // })
         $.get({
        //     method:'post',
        //     url:src,
        //     data:'',
        //     dataType:'json',
        //     success:function(res){
        //         console.log(res)
        //     }

        // })
         $.post({
        //     method:'post',
        //     url:src,
        //     data:'',
        //     dataType:'json',
        //     success:function(res){
        //         console.log(res);
        //     }
        // })
        // $.getJSON(src, {

        // }, function (res) {
        //     console.log(res);
        // });
        // https://www.baidu.com/s?&wd= 搜索接口
        // https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd=1&cb=baidudata(实例) 
        // jsonp跨域
        // 利用百度搜索接口，jsonp跨域，实现搜索  都类似
        $.ajax({
        //     method: 'post',
        //     url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?cb=callData",
        //     data:{wd:'csdn'},
        //     dataType: 'jsonp',
        //     jsonpCallback: 'callData',
        //     success: function (res) {
        //         console.log(res.s);
        //     }
        // });
        $.post({
        //     method: 'post',
        //     url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?cb=callData",
        //     data:{wd:'csdn'},
        //     dataType: 'jsonp',
        //     jsonpCallback: 'callData',
        //     success: function (res) {
        //         console.log(res.s);
        //     }
        // })
        $.get({
        //     method:'get',
        //     url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?cb=callData',
        //     data:{wd:'csdn'},
        //     dataType:'jsonp',
        //     jsonpCallback:'callData',
        //     success:function(res){
        //         console.log(res.s);
        //     }
        // })
        $.getJSON({
        //     url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?cb=callData',
        //     data: {
        //         wd: 'csdn'
        //     },
        //     dataType: 'jsonp',
        //     jsonpCallback: 'callData',
        //     success: function (res) {
        //         console.log(res.s);
        //     }
        // })
    </script>
</body>

</html>

 

ICY___
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端背诵之ajax
m0_52749777的博客
05-20 169
前端交互
$.ajax()方法详解及ajax如何post提交附件及参数
hbhouse的博客
10-24 3438
$.ajax()方法详解 jquery中的ajax方法参数总是记不住，这里记录一下。 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。 4.async: 要求为Boolean
JQuery中Ajax的操作
热门推荐
学会改变自己——才能突破
03-27 20万+
Java软件开发中，后台中我们可以通过各种框架，像SSH等进行对代码的封装，方便我们对Java代码的编写，例如，Struts,SpringMVC对从前台到action的流程进行封装控制，使我们只需要进行一些简单配置就可以实现；而Spring进行了对各种对象的管理进行封装，提供了AOP编程的方式，大大方便了我们；而Hibernate和IBatis则是对JDBC代码进行封装，不需要我们每次都写那些重复
$.ajax() 参数详解
kangmingyaner的博客
04-12 221
1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。4.async: ...
使用Ajax的post方式提交表单后，变成get方式
程序人生
07-08 988
使用$ajax({type: "post" 或者 $.post()方式提交发现地址栏仍然发生改变，查看f12 发现还是使用的get方式提交的参数。
谈谈jQuery Ajax用法详解
10-23
在jQuery库中，AJAX 提供了多种方便的方法，包括 $.get, $.post, $.ajax 等，用于执行异步数据请求。 首先，$.ajax() 是 jQuery 中最底层的 AJAX 实现，它可以让你自定义所有可能的选项，如请求类型（GET 或 POST）...
基于JQuery的Ajax方法使用详解
11-30
如下所示： $.ajax的主要参数： url: '_请求的地址', type: 请求类型 get & post data: '请求的参数, success：回调函数 $.ajax({ ... type: 'get', data: 'name=' + $('input...jQuery的一些属性： $('xx').find
jQuery AJAX实现调用页面后台方法
10-22
通过以上步骤，我们可以实现使用jQuery AJAX从页面前端调用后台方法，获取数据并更新页面内容，从而实现页面的动态更新，提高用户体验。在实际开发中，可以根据需求调整这些方法，例如添加请求前后的加载动画，或者...
jQuery Ajax()方法使用指南
10-25
jQuery的Ajax方法是JavaScript开发中不可或缺的一部分，它简化了与服务器进行异步数据交换的过程。在本文中，我们将深入探讨jQuery的$.ajax()方法及其重要参数和注意事项。 首先，$.ajax()方法允许开发者自定义几乎...
jquery ajax abort()的使用方法
12-10
由于使用的是jquery,挡在手册里没有找到关于.abort()方法，在网上搜索了一下，在http://ooxx.me/jquery-ajax-abort.orz看到有关于jquery 里.abort()使用方法,直接用例子: 代码如下: current_request = $.get(‘/...
ajax请求post和get的区别，以及get post选择
咸鱼的星空
04-17 2092
1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
jQuery中ajax的使用（最详细）
小屁鸿的博客
08-02 3万+
jQuery中ajax的使用1.jQuery中ajax的基本使用2.jQuery中ajax的回调事件3.jQuery中ajax中的高度封装函数4.jQuery中ajax的全局事件 1.jQuery中ajax的基本使用 2.jQuery中ajax的回调事件 3.jQuery中ajax中的高度封装函数 4.jQuery中ajax的全局事件 ...
Ajax提交之后，Method从POST变成GET
bellah521
05-05 1万+
开发工程中遇到一个小却很困惑的问题 进行ajax请求时，用的是post但是系统会自动给转成get,一直不明白。现在找到原因了。 原因如下： 因为你的 dataType 是 jsonp 而不是 json jsonp不支持POST跨域，所以会自动给你转成GET记录下来，希望可以帮助大家~~~~
jQuery中Ajax的使用方法
ruxioniu的博客
05-14 512
逆战班学习总结 Ajax全称为“Asynchronous(异步) JavaScript And XML” 是指一种创建交互式网页应用的开发技术，通过在 后台与服务器进行少量数据交互，实现网页的异步更新，在不重新加载整个界面的情况下，做到网页的部分刷新，极大地改善了用户体验。 jQuery对Ajax操作进行了封装，我们不需要考虑兼容和跨域的问题了。在jQuery中$.ajax()属于最底层的方法，load()，$.get()和$.post()属于第二层。 load() load()方法是最简单和常用的aja
jQuery ajax设置全局配置
試毅-思伟_技术博客
07-04 801
$.ajaxSetup({ dataType : "json", contentType : "application/json", headers : { 'Content-Type' : 'application/x-www-form-urlencoded' }, error : function(jqXHR, textStatus, errorThrown) { swit...
初学JQuery（3）：jquery-ajax
lalala_dxf的博客
05-05 445
简介 编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着必须编写额外的代码对浏览器进行测试。因此jQuery团队为我们将原生ajax进行了封装，现在我们只需要一行简单的代码，就可以实现 AJAX 功能。 1、低级别接口 1.1 $.ajax(url,其他键值对) Ajax()不仅能实现与$ .load()，$ .get()，$.post()同样的功能，而且还可以设定beforeSend（提交前回调函数）、error（请求失败后处理）、success（请求成功后处理）、
异步请求ajax介绍，原生ajax，$.ajax基本使用
秃头披风侠的博客
03-31 3344
在这篇文章中，我们将学习ajax的工作原理，已经使用原生的ajax和jquery的ajax来进行编程练习。 目录 ajax原理介绍 什么是ajax ajax的优点 ajax的应用场景 ajax原理分析 使用ajax 原生ajax jquery使用ajax $.ajax() $.get() $.post() 总结 ajax原理介绍 ajax现在是前后端交互的重要工具，可以说，只要从事于it行业，ajax那就是必须要掌握的一名技术，下面我们就来对a...
ajax调用其他方法 methods_JavaScript调用后台的三种方法实例(包含两种Ajax)
weixin_39693193的博客
12-19 670
方法一：直接使用调用(ASPX页面)前台JS，代码如下：var methodStr = "";alert(methodStr);后台方法，代码如下：public static string BehindMethod(){return "这是一个后台的方法";}说明：1)BehindMethod()方法前的public访问修饰符不要忘了；2)此法有局限性——BehindMethod()只会在ASPX...
$.ajax实现原理（封装ajax）
pony的博客
02-02 1227
/*script> ajax({ url:"data/data.json", method:"get", data:{name:"zf"}, dataType:"json", cache:false, async:false, success:function (res) {
jquery ajax 使用
最新发布
06-04
jQuery Ajax 是一种用于创建快速动态网页的技术。Ajax 的意思是异步 JavaScript 和 XML。这意味着，网页不需要重新加载，就可以在后台向服务器发送请求，然后更新页面上的数据。 以下是 jQuery Ajax 的一些基本用法： 1. 发送 GET 请求： ``` $.ajax({ url: 'example.php', method: 'GET', success: function(data) { // 成功时的处理 }, error: function() { // 失败时的处理 } }); ``` 2. 发送 POST 请求： ``` $.ajax({ url: 'example.php', method: 'POST', data: {name: 'John', age: 30}, success: function(data) { // 成功时的处理 }, error: function() { // 失败时的处理 } }); ``` 以上代码中，`url` 表示请求的 URL 地址，`method` 表示请求的方法（GET 或 POST），`data` 表示请求时发送的数据，`success` 表示成功时的回调函数，`error` 表示失败时的回调函数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值