注：本案例选用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
//如果通过域名访问的是局域网内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.'"}';
}
}
//注意：本案例只是简单的做一个演示，更复杂的情况就不往下写了。
?>
扫一扫
3537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
