ajax教程:jquery的ajax常用方法

ajax教程:jquery的ajax常用方法-第1张-菜鸟建站

load(): 请求数据

<script>
      // 1. load(): 请求数据, Html代码片断
        $("button").click(function(){
            $(this).after("<div>").next().load("ym.html");
        });
</script>

$.get(): 请求数据

<script>
      // 2. $.get(): 幂操作
      $("button").click(function(ev){
        $.get("users.php",{id:2},function (data){
            console.log(data);
            $(ev.target).after("<div>").next().html(data);
        });
      });
</script>

$.post(): 请求数据

<script>
      // 3. $.post():
      $("button").click(function(ev){
        $.post("users.php",{id:1},function(data){
            console.log(data)
            $(ev.target).after("<div>").next().html(data);
        })
      })
</script>

$.getJSON(): 请求JSON数据

<script>
      $("button").click(function (ev) {
        $.getJSON("users.php?id=3", function (data) {
          // 从服务器返回josn会自动解析为JS对象,JSON.parse()
          console.log(data);
          data = `${data.id}: ${data.name}, 年龄: ${data.age}`;
          $(ev.target).after("<div>").next().html(data);
        });
      });
</script>

$.ajax(): 请求数据

<script>
      $("button").click(function (ev) {
        $.ajax({
          // 请求类型
          type: "GET",
          // 请求URL
          url: "users.php",
          // 发送的数据
          data: { id: 1 },
          // 希望服务器返回的数据类型
          dataType: "html",
          // 成功的回调处理方法
          success(data) {
            $(ev.target).after("<div>").next().html(data);
          },
        });
      });
 </script>

$.ajax()-jsonp: 跨域请求数据1

<script>
      // 6. $.ajax()-jsonp: 跨域请求数据1
      $("button").click(function (ev) {
        $.ajax({
          type: "GET",
          // jsonp=?, ?是回调方法的占位符,请求发送时用jsonpCallback替换
          url: "http://php.io/test.php?id=2&jsonp=?",
          dataType: "jsonp",
          jsonpCallback: "handle",
        });
      });
</script>

$.ajax()-jsonp: 跨域请求数据2

<script>
      // 7. $.ajax()-jsonp: 跨域请求数据2
      $("button").click(function (ev) {
        $.ajax({
          type: "GET",
          // jsonp=?, ?是回调方法的占位符,请求发送时用jsonpCallback替换
          url: "http://php.io/test.php?id=3&jsonp=?",
          dataType: "jsonp",
          success(data) {
            console.log(data);
            data = `Name: ${data.name}, Email: ${data.email}`;
            $("button:last-of-type").after("<div>").next().html(data);
          },
        });
      });
</script>

$ajax(){}步骤:

//设置请求类型 type:”get/post”,
//设置请求地址 url: “url地址” ,
//发送数据 数据保存在date里面 date值是查询条件 date:” {id:1}” ,
//设置服务器希望返回的数据类型 datetype:” html/json/…”,
//请求成功后的回调函数 succes( 设置函数的参数 ){ 设置函数 }


以上为本文全部内容,代码粗陋希望对你有所帮助。

猜你喜欢

【已解决】javascript设置window.location.href跳转无效问题

【已解决】javascript设置window.location.href跳转无效问题

今天开启了用户注册功能,使用了唐朝的【用户中心(百搭)】zblog插件。开启后,发现一个小问题,注册修改密码等等提交数据成功后均无法跳转页面。找问题原因:表单form  会先执行form提交。提交之后 就已经不在当前页面了。所以 window.location.href无效。解决方法一......

js判断本地是否安装某某app,内附常用第三方APP UrlScheme

js判断本地是否安装某某app,内附常用第三方APP UrlScheme

判断本地是否安装了某个app,前提条件:你得知道你的APP对应的打开协议UrlScheme,如贴吧APP,协议为:com.baidu.tieba:// ,微信的:weixin:// 等等...app下载链接可以到app官网找到,然后用浏览器打开就行。有了这个你就可以做各种羞羞的事情了,以下附送一些常见第三方APP UrlScheme...

评论列表

发表评论