jquery的ajax跨域交互数据
2016-10-08 15:10
399 查看
注:本案例选用php作为后台处理环境
准备材料:
两台局域网内联成功的电脑;或者一台电脑,并有安装虚拟机,且主机和虚拟机都搭建好了web服务器环境(其中一台需要有php环境),两者可以网络互通。当然,如果条件允许还有很多其他的方式,比如说两台云主机等。
“jquery.min.js”文件
主机一:
负责前端网页,需要用jquery的方式跨域访问后台服务器并请求数据。
主机二:
负责后台接受处理数据,并返回json字符串给前端页面的回调函数。
前台页面:
请在主机一的web访问主目录下创建文件夹:test
将准备好的“jquery.min.js”文件放在test文件夹中
并创建npp.html,详细内容:
/********************npp.html***********************/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.ajax跨域交互数据</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
//如果通过域名访问的是局域网IP地址,请自行更改host文件
$(document).ready(function() {
$('#submit1').click(function(){
$.ajax({
type:"POST",
url:"http://主机二IP或域名/yp.php?company=l4sdge25254f4f1f1f454589891b1bc9&key=ni54sebebe5656e0e05757f2&type=insert&name=npp",
data: $('#from1').serialize(),
crossDomain: true,
contentType: false,
processData: false,
dataType: 'json',
success:function(req) {
alert(req.user);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert('访问有误,请联系管理员');
}
});
return false;
});
});
</script>
</head>
<body>
<center>
<div style="width:600px; height:1000px; background-color:#096;">
<form action="#" method="post" enctype="multipart/form-data" id="from1" name="from1">
<input type="text" name="user" value="maike"/><br>
<input type="text" name="pass" value="123456"/><br>
<input type="text" name="book" value="yigeren"/><br>
<input type="text" name="dort" value="henmo"/><br>
<input type="button" id="submit1" value="提交"/>
</form>
</div>
</center>
</body>
</html>
后台处理页面:
在主机二的web访问主目录下创建yp.php
/***********************yp.php*************************/
<?php
//如果通过域名访问的是局域
4000
网内IP地址,请自行更改host文件
//只允许http://主机一iP地址或域名,跨域提交数据
header("Access-Control-Allow-Origin:http://主机一IP或域名");
header("Access-Control-Allow-Methods:GET, POST, OPTIONS");
header("Access-Control-Allow-Headers:Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
//ob_start( );
//include_once( "inc/conn.php" );
//include_once( "inc/safetokey.php" );
//include_once("inc/selvalue.php");
$company = $_GET['company'];
$key = $_GET['key'];
//$company = 'l4sdge25254f4f1f1f454589891b1bc9';
//$key = 'ni54sebebe5656e0e05757f2';
if($company != 'l4sdge25254f4f1f1f454589891b1bc9' && $key != 'ni54sebebe5656e0e05757f2')
{
echo '不成功';
exit;
}
/*
if(check_tokey($company,$key) && $model)
{
echo '不成功';
exit;
}*/
//操作类型
$type = $_GET['type'];
$name = $_GET['name'];
//获取前台表单数据,并以前台表单中name的值创建变量 = 该name的value
$post_data = explode('&',file_get_contents( "php://input"));
foreach ($post_data as $value)
{
/****
* 正式环境中,请自行做检测代码
*比如检测name是符合需要 或 判断是否存在异常,value的值是否符合要求 或 判断是否存在异常等
*******/
$varr = explode('=',$value);
$$varr[0] = $varr[1];
}
//insert新增;update更新;delete删除;query查询
$typeArr = array('insert','update','delete','query');
//模块数组
$nameArr = array('npp');
//检查访问申请处理的类型和模块是否符合默认设置
if(in_array($type,$typeArr,true) && in_array($name,$nameArr,true))
{
if($type === 'insert' || $type === 'update')
{
//简单输出一个json数据,查看是否弹出前台页面中表单name=user的value值
echo '{"success":true,"id":"1","user":"'.$user.'"}';
}
}
//注意:本案例只是简单的做一个演示,更复杂的情况就不往下写了。
?>
准备材料:
两台局域网内联成功的电脑;或者一台电脑,并有安装虚拟机,且主机和虚拟机都搭建好了web服务器环境(其中一台需要有php环境),两者可以网络互通。当然,如果条件允许还有很多其他的方式,比如说两台云主机等。
“jquery.min.js”文件
主机一:
负责前端网页,需要用jquery的方式跨域访问后台服务器并请求数据。
主机二:
负责后台接受处理数据,并返回json字符串给前端页面的回调函数。
前台页面:
请在主机一的web访问主目录下创建文件夹:test
将准备好的“jquery.min.js”文件放在test文件夹中
并创建npp.html,详细内容:
/********************npp.html***********************/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.ajax跨域交互数据</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
//如果通过域名访问的是局域网IP地址,请自行更改host文件
$(document).ready(function() {
$('#submit1').click(function(){
$.ajax({
type:"POST",
url:"http://主机二IP或域名/yp.php?company=l4sdge25254f4f1f1f454589891b1bc9&key=ni54sebebe5656e0e05757f2&type=insert&name=npp",
data: $('#from1').serialize(),
crossDomain: true,
contentType: false,
processData: false,
dataType: 'json',
success:function(req) {
alert(req.user);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert('访问有误,请联系管理员');
}
});
return false;
});
});
</script>
</head>
<body>
<center>
<div style="width:600px; height:1000px; background-color:#096;">
<form action="#" method="post" enctype="multipart/form-data" id="from1" name="from1">
<input type="text" name="user" value="maike"/><br>
<input type="text" name="pass" value="123456"/><br>
<input type="text" name="book" value="yigeren"/><br>
<input type="text" name="dort" value="henmo"/><br>
<input type="button" id="submit1" value="提交"/>
</form>
</div>
</center>
</body>
</html>
后台处理页面:
在主机二的web访问主目录下创建yp.php
/***********************yp.php*************************/
<?php
//如果通过域名访问的是局域
4000
网内IP地址,请自行更改host文件
//只允许http://主机一iP地址或域名,跨域提交数据
header("Access-Control-Allow-Origin:http://主机一IP或域名");
header("Access-Control-Allow-Methods:GET, POST, OPTIONS");
header("Access-Control-Allow-Headers:Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");
//ob_start( );
//include_once( "inc/conn.php" );
//include_once( "inc/safetokey.php" );
//include_once("inc/selvalue.php");
$company = $_GET['company'];
$key = $_GET['key'];
//$company = 'l4sdge25254f4f1f1f454589891b1bc9';
//$key = 'ni54sebebe5656e0e05757f2';
if($company != 'l4sdge25254f4f1f1f454589891b1bc9' && $key != 'ni54sebebe5656e0e05757f2')
{
echo '不成功';
exit;
}
/*
if(check_tokey($company,$key) && $model)
{
echo '不成功';
exit;
}*/
//操作类型
$type = $_GET['type'];
$name = $_GET['name'];
//获取前台表单数据,并以前台表单中name的值创建变量 = 该name的value
$post_data = explode('&',file_get_contents( "php://input"));
foreach ($post_data as $value)
{
/****
* 正式环境中,请自行做检测代码
*比如检测name是符合需要 或 判断是否存在异常,value的值是否符合要求 或 判断是否存在异常等
*******/
$varr = explode('=',$value);
$$varr[0] = $varr[1];
}
//insert新增;update更新;delete删除;query查询
$typeArr = array('insert','update','delete','query');
//模块数组
$nameArr = array('npp');
//检查访问申请处理的类型和模块是否符合默认设置
if(in_array($type,$typeArr,true) && in_array($name,$nameArr,true))
{
if($type === 'insert' || $type === 'update')
{
//简单输出一个json数据,查看是否弹出前台页面中表单name=user的value值
echo '{"success":true,"id":"1","user":"'.$user.'"}';
}
}
//注意:本案例只是简单的做一个演示,更复杂的情况就不往下写了。
?>
相关文章推荐
- 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例
- JSONP解决跨域提交数据(jquery jsonp Ajax)
- jquery的ajax和getJson跨域获取json数据
- jQuery使用ajax跨域获取数据
- jquery的ajax和getJson跨域获取json数据的实现方法
- jQuery使用ajax跨域获取数据
- jquery的ajax和getJson跨域获取json数据
- (跨域)jquery.ajax提交请求并返回json数据
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- jQuery使用ajax跨域获取数据
- jquery的ajax和getJson跨域获取json数据
- jquery—ajax的异步交互,返回json串,再弹出层显示数据
- jQuery之ajax的跨域获取数据
- 利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService,返回json数据
- jQuery的ajax()检验用户名;通过jQuery的load()/get()/post()方法实现;使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- JQuery九种与后台交互数据的方法(ajax)
- jquery的ajax和getJson跨域获取json数据
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- jquery的ajax和getJson跨域获取json数据的实现方法