http://www.cnblogs.com/cwp-bg/p/7668840.html  ajax和jsonp使用总结  2017-10-17


  1. var requestUrl="http://localhost/1.html?callback=?";
  2. $.ajax({
  3. type : "get",
  4. async:true,
  5. url : requestUrl,
  6. data : "channelid=7&current=1&rowSize=4",
  7. dataType : "jsonp",
  8. success :function(data){
  9. console.log("--------(xxxxx)-----success");
  10. },
  11. error:function(data){
  12. console.log("error: (xxxxx)");
  13. }
  14. });

注意:跨域要用jsonp,并且双方要有约定callback

php代码:

  1. $callback=$_GET['callback'];
  2. echo $callback."($res)";

检测手机app嵌入的H5页面,是否处于联网状态  2016-6-29

  1. var requestUrl="http://localhost/1.html?callback=?";
  2. var ajaxTimeoutTest = $.ajax({
  3. type : "get",
  4. timeout: 1000,//超出时间设置,单位毫秒
  5. async:true,
  6. url : requestUrl,
  7. data : "channelid=7&current=1&rowSize=4",
  8. dataType : "jsonp",
  9. success :function(data){
  10. console.log("--------(xxxxx)-----success");
  11. },
  12. error:function(data){
  13. console.log("error: (xxxxx)");
  14. },
  15. complete:function(XMLHttpRequest,status){//请求完成后最终执行参数
  16. if(status == 'timeout' ){ //超时,status还有success,error等值的情况
  17. ajaxTimeoutTest.abort();
  18. alert('超时');
  19. }
  20.  
  21. }
  22. });

一个简单的ajax例子

  1. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  2. <script type="text/javascript">
  3. $(function(){
  4. var TEST = {
  5. test:function() {
  6. //var requestUrl=GLOBAL.WEBSITE+"client/newspaper/getNewspaper.html?callback=?";
  7. var requestUrl="http://121.199.44.182:8090/client/newspaper/getChannel.html?callback=?";
  8. $.ajax({
  9. type : "post",
  10. async:true,
  11. url : requestUrl,
  12. data : "typeid=2&channelid=7",
  13. dataType : "jsonp",
  14. success :function(data){
  15. console.log("-------------success");
  16. console.log(data);
  17. for(var i=0;i<data.length;i++){
  18. console.log(data[i].id);
  19. console.log(data[i].name);
  20. }
  21. },
  22. error:function(data){
  23. console.log("error:"+data[0]);
  24. }
  25. });
  26. },
  27. };
  28.  
  29. TEST.test();
  30. });
  31. </script>

用对象方式传参数:

  1. var requestUrl="http://192.168.1.1/expai_data/counter?";
  2. $.ajax({
  3. type : "post",
  4. async:true,
  5. url : requestUrl,
  6. data : "product="+product+"&name="+consignee+"&address="+address+"&phone="+phone+"&content="+content+"&step="+step+"&cpmc="+cpmc+"&src="+src,
  7. /*
  8. data:{
  9. product : product,
  10. name : consignee,
  11. address : address,
  12. phone : phone,
  13. content : content,
  14. step : step,
  15. cpmc : cpmc,
  16. },*/
  17. dataType : "jsonp",
  18. success :function(data){
  19. //console.log("--------(xxxxx)-----success");
  20. },
  21. error:function(data){
  22. //console.log("error: (xxxxx)");
  23. }
  24. });

一个简单的 $.getJSON 例子:2016-1-18

  1. var targetUrl = "http://192.168.1.34:85/jiazhuang/ajax/?action=getMapInfo&callback=?";
  2. $.getJSON(targetUrl,{
  3. format: "json"
  4. },
  5. function(data) {
  6. alert(data.type);
  7. }
  8. );

一个简单的 $.ajax 例子:2016-1-18

  1. var targetUrl = "http://192.168.1.34:85/jiazhuang/ajax/?action=getMapInfo&callback=?";
  2. $.ajax({
  3. type: "get",
  4. url: targetUrl,
  5. data: {},
  6. dataType: "jsonp",
  7. jsonp : "callback",
  8. async:true,
  9. cache: false,
  10. success: function(data) {
  11. if(data.type==1){
  12. console.log(data.msg);
  13. }else{
  14. console.log(data.msg);
  15. }
  16. },
  17. error: function(data) {
  18. console.log("操作失败");
  19. },
  20. });

 json解析成字符串、字符串解析为json:

  1. var book={a:1,b:2}//这是原始的json
  2. var jsonBook=JSON.stringify(book);//json解析成字符串
  3. var objectBook=JSON.parse(jsonBook); //字符串解析为json
  4. alert(book);
  5. alert(jsonBook);
  6. alert(objectBook.a);

.........

var requestUrl="http://localhost/1.html?callback=?";var ajaxTimeoutTest = $.ajax({    type : "get",    timeout: 1000,//超出时间设置,单位毫秒    async:true,    url : requestUrl,    data : "channelid=7&current=1&rowSize=4",    dataType : "jsonp",    success :function(data){        console.log("--------(xxxxx)-----success");    },    error:function(data){        console.log("error: (xxxxx)");    },    complete:function(XMLHttpRequest,status){//请求完成后最终执行参数    if(status == 'timeout' ){//超时,status还有success,error等值的情况    ajaxTimeoutTest.abort();    alert('超时');        }        }});

代码: !AJAX的更多相关文章

  1. 2、记录代码----Ajax

    $.ajax({ url:'/content-engine/index.php/tracker/confirmSendEmail', async: false, //默认为true,同意异步传输 da ...

  2. 框架基础:ajax设计方案(五)--- 集成promise规范,更优雅的书写代码

    距离上一篇博客书写,又过去了大概几个月了,这段时间暂时离开了这个行业,让大脑休息一下.一个人旅行,一个人休息,正好也去完成一个目标 --- 拥有自己的驾照.当然,也把自己晒的黑漆马虎的.不过这一段时间 ...

  3. 前端通信:ajax设计方案(五)--- 集成promise规范,更优雅的书写代码(改迭代已作废,移步迭代10)

    该迭代已作废,最新的请移步这里:https://www.cnblogs.com/GerryOfZhong/p/10726306.html 距离上一篇博客书写,又过去了大概几个月了,这段时间暂时离开了这 ...

  4. Python之Flask和Django框架解决跨域问题,配合附加ajax和fetch等js代码

    Flask框架py解决跨域问题示例: # -*- coding: utf- -*- # by zhenghai.zhang from flask import Flask, render_templa ...

  5. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  6. jQuery.ajax(url,[settings])

    概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象. ...

  7. 页面滚动到底部自动 Ajax 获取文章

    页面滚动到底部自动 Ajax 获取文章  代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) {    if (_time ...

  8. SSH实战 · AJAX异步校验

    前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){      /*取到用户名输入框*/      var nametxt = documen ...

  9. Jquery通过Ajax方式来提交Form表单

    今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...

  10. PHP中AJAX的使用(完整实例【大牛可飘过】)

    有一段时间不写关于AJAX的东西了,最近和同学参加个比赛,要做一个类似博客的东西,用到了AJAX的东西,在写东西之前为了再熟悉一下AJAX,自己做了个关于AJAX的小事例与大家分享一下. AJAX在j ...

随机推荐

  1. mybatis foreach 遍历list中的坑

    将jdbc改写为mybatis时,传入的条件为list使用到的标签是<where> .<choose>.<when>.<if>.<foreach& ...

  2. FPGA型号解读

  3. SVG路径PATH

    SVG路径PATH 在使用之前建议下个PS或者FLASH玩玩里面的钢笔工具(FLASH里的钢笔工具比PS里的好用) PATH用到的指令: M----(X Y):移动到 Z----(none):关闭路径 ...

  4. man 命令帮助文件输出乱码

    man 命令重定向的时候有写控制字符再直接显示的时候没有问题, 但是重定向到文件中的时候,被解释错误,显示为 ^H 或者乱码 解决方法: man ps | col -b >a.txt 可以消除所 ...

  5. 关于Excel导出实例(适合新手,比较详细)

    需要源代码的可以加我微信好友gqljxg1514 1,首先配置依赖pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0&q ...

  6. 面向对象编程其实很简单--python面向对象(初级篇)

    出处:http://www.cnblogs.com/wupeiqi/ 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函 ...

  7. wc语法2

    wc命令的功能为统计指定文件中的字节数.字数.行数, 并将统计结果显示输出. 语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同 ...

  8. Java六大必须理解的问题

    Java六大必须理解的问题 对于这个系列里的问题,每个学Java的人都应该搞懂.当然,如果只是学Java玩玩就无所谓了.如果你认为自己已经超越初学者了,却不很懂这些问题,请将你自己重归初学者行列.内容 ...

  9. yum 的 group的信息

    查找 yum源中有哪些group及其详细信息 1:yum groupinfo '*' | less 2:yum groupinfo '*' | less +/sendmail-cf 将 sendmai ...

  10. Oracle使用笔记(二)

    一.表空间 1.创建表空间 create tablespace db_test --表空间名 datafile 'D:\oracle\product\11.2.0\dbhome_1\oradata\o ...