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


var requestUrl="http://localhost/1.html?callback=?";
$.ajax({
type : "get",
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)");
}
});

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

php代码:

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

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

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例子

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
var TEST = {
test:function() {
//var requestUrl=GLOBAL.WEBSITE+"client/newspaper/getNewspaper.html?callback=?";
var requestUrl="http://121.199.44.182:8090/client/newspaper/getChannel.html?callback=?";
$.ajax({
type : "post",
async:true,
url : requestUrl,
data : "typeid=2&channelid=7",
dataType : "jsonp",
success :function(data){
console.log("-------------success");
console.log(data);
for(var i=0;i<data.length;i++){
console.log(data[i].id);
console.log(data[i].name);
}
},
error:function(data){
console.log("error:"+data[0]);
}
});
},
}; TEST.test();
});
</script>

用对象方式传参数:

var requestUrl="http://192.168.1.1/expai_data/counter?";
$.ajax({
type : "post",
async:true,
url : requestUrl,
data : "product="+product+"&name="+consignee+"&address="+address+"&phone="+phone+"&content="+content+"&step="+step+"&cpmc="+cpmc+"&src="+src,
/*
data:{
product : product,
name : consignee,
address : address,
phone : phone,
content : content,
step : step,
cpmc : cpmc,
},*/
dataType : "jsonp",
success :function(data){
//console.log("--------(xxxxx)-----success");
},
error:function(data){
//console.log("error: (xxxxx)");
}
});

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

var targetUrl = "http://192.168.1.34:85/jiazhuang/ajax/?action=getMapInfo&callback=?";
$.getJSON(targetUrl,{
format: "json"
},
function(data) {
alert(data.type);
}
);

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

var targetUrl = "http://192.168.1.34:85/jiazhuang/ajax/?action=getMapInfo&callback=?";
$.ajax({
type: "get",
url: targetUrl,
data: {},
dataType: "jsonp",
jsonp : "callback",
async:true,
cache: false,
success: function(data) {
if(data.type==1){
console.log(data.msg);
}else{
console.log(data.msg);
}
},
error: function(data) {
console.log("操作失败");
},
});

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

var book={a:1,b:2}//这是原始的json
var jsonBook=JSON.stringify(book);//json解析成字符串
var objectBook=JSON.parse(jsonBook); //字符串解析为json
alert(book);
alert(jsonBook);
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. Java语法基础学习DayEighteen(常用类)

    一.String类 1.特点 String代表不可变的字符序列,底层用char[]存放. String是final的. 2.内存解析 3.常用方法 int length() char charAt(i ...

  2. 外网访问SQLServer数据库holer实现

    外网访问内网SQLServer数据库 内网主机上安装了SQLServer数据库,只能在局域网内访问,怎样从公网也能访问本地SQLServer数据库? 本文将介绍使用holer实现的具体步骤. 1. 准 ...

  3. 小程序点击按钮清空input

    大致的思路是先给标签input设置一个value <input value="{{value}}" placeholder="最大输入长度10"/> ...

  4. switch留个爪,之后还需要再研究下

    public class SwitchDemo { public static void main (String [] args) { for(int i = 0; i < 10; i++) ...

  5. freebsd安装python2

    第一步  cd /usr/ports/lang/python27 第二步 输入以下命令(需要联网) make make install 到此如果输入python无效   继续 第三步 cd /usr/ ...

  6. struts2 自定义异常拦截器配log4j

    log4j.rootLogger = debug,stdout,F log4j.appender.stdout = org.apache.log4j.ConsoleAppender log4j.app ...

  7. eclipse配置环境变量

    下载JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html 3.配置环境变量:右击“我的电脑”-->&quo ...

  8. day056-58 django多表增加和查询基于对象和基于双下划线的多表查询聚合 分组查询 自定义标签过滤器 外部调用django环境 事务和锁

    一.多表的创建 from django.db import models # Create your models here. class Author(models.Model): id = mod ...

  9. Docker之 数据持久化

    容器中数据持久化主要有两种方式: 数据卷(Data Volumes) 数据卷容器(Data Volumes Dontainers) 数据卷 数据卷是一个可供一个或多个容器使用的特殊目录,可以绕过UFS ...

  10. laravel 使用 php artisan make:model到指定目录(controller同理)

    在 \app\Models 目录下创建一个BusinessProduct模型文件 D:\htdocs\PHPTutorial\WWW\gf>php artisan make:model /Mod ...