全面解析Ajax和jsonp使用总结

网络编程 2025/11/4 佚名

3 2 1

前言：ajax和jsonp可以与后台通信，获取数据和信息，但是又不用刷新整个页面，实现页面的局部刷新。

一、ajax

"htmlcode">

$(function () {
  $("input").click(function () {
    $.ajax({
      url: "./data.json",
      type: "get",
      dataType: "json",
    });
    .done(function(data) {//请求成功的回调函数
      $("input").val(dat.name);
    })
    .fail(function() {
      alert('服务器超时，请重试！');
    });
  });
})
......
<body>
  <div>
    <input type="button" value="xinzhi">
  </div>
</body>

说明：data表示后台返回的数据；ajax使用需要依赖服务器环境。

2. $.get():

"htmlcode">

//参考代码：
$(function () {
  $("input").click(function () {
    $.get(
      "./data.json",
      function (data,status) {
        console.log(data.name);
      },
      "json"
    );
  });
})
......
<body>
  <div>
    <input type="button" value="xinzhi">
  </div>
</body>

""success","error","timeout"等几种。
"htmlcode">

$(function () {
  $("input").click(function () {
    $(".box").load(
      "./data.json",
      function (response,status) {
        console.log(data.name);
      }
    );
  });
})
......
<body>
  <div>
    <input type="button" value="xinzhi">
    <div class="box"></div>
  </div>
</body>

"htmlcode">

$(function () {
  $("input").click(function () {
    $.getJSON(
      "./data.json",
      function(data,status) {
        console.log(data.name);
      },
    );
  });
})
......
<body>
  <div>
    <input type="button" value="xinzhi">
  </div>
</body>

"htmlcode">

$(function () {
  $("input").click(function () {
    $.getScript(
      "./data.js",
      function(data,status) {
        console.log(data);
      },
    );
  });
})
......
<body>
  <div>
    <input type="button" value="xinzhi">
  </div>
</body>

"color: #ff0000">二、jsonp

"htmlcode">

<script type="text/javascript">
  function aa(data){
    console.log(data.name);
  }
</script>
<script type="text/javascript" src="/UploadFiles/2021-04-02/data.js">

说明：在外部定义一个data.js文件，这个文件的路径可以与当前页面不在同一个域下面。
data.js的内容：




aa({
  
  "data":{
    "name":"xiaohong",
    "age":"18"
  }
})


"htmlcode">

$.ajax({
  url:'...../data.js',//可以不是本地域名 
  type:'get',
  dataType:'jsonp', //jsonp格式访问
  jsonpCallback:'aa' //获取数据的函数
})
.done(function(data){
  console.log(data.name);
})
.fail(function() {
  alert('服务器超时，请重试！');
});


"htmlcode">

var $input = $("input");
$input.keyup(function () {
  $.ajax({
    url:'https://sug.so.360.cn/suggest"text">
</body>


•通过浏览器查看每次输入关键字服务器发送回的数据包，找到js文件中header的地址以及相关的提交数据，发现key为word关键字，因此可以向服务器发送data数据。

•服务器返回的数据会自动传给回调的匿名函数的参数data.


总结
以上所述是小编给大家介绍的Ajax和jsonp使用总结，需要的朋友参考下

ajax,和jsonp,使用

标签：

ajax,和jsonp,使用

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“全面解析Ajax和jsonp使用总结”

全面解析Ajax和jsonp使用总结

暂无“全面解析Ajax和jsonp使用总结”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新动态

2025年11月04日

全面解析Ajax和jsonp使用总结

ajax,和jsonp,使用

解决Ajax加载JSon数据中文乱码问题

django获取ajax的post复杂对象的实现方法

评论“全面解析Ajax和jsonp使用总结”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新动态

友情链接