获取表单内容
var username = $("#username").val();
------------------------------------------------
ajax的调用
async:false 使用同步方式
cache:true
ajax 返回值是json类型,在php这边接收时,选择用php输入流php://input 获取原始的输入内容;结果值要用json_encode, 对变量进行 JSON 编码。
----------------------------------------------------------------
一,html发送数据,php接受数据
$.post('ajax.php', //url 提交方式写在了开头
{name:username,pwd:password}, //内容
function(data) //成功
{
$.ajax({ //调用
url: "ajax.php", //URL
type: "POST", //提交方式
data:{name:username,pwd:password}, //内容
dataType: "json", //格式
error: function(){ //如果调用php失败
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(status);
alert(data);
$('.con').html("用户名:"+data[0]+"密码:"+data[1]);
}
});
$.ajax({
url: "ajaxTest2.php",
type: "POST",
data:{name:username,pwd:password},
dataType: "json",
//(默 认: 自动判断 (xml 或 html)) 请求失败时调用时间。
//参数有以下三个:XMLHttpRequest 对象、错误信息、(可选)捕获的错误对象。
//如果发生了错误,错误信息(第二个参数)除了得到null之外,
//还可能是"timeout", "error", "notmodified" 和 "parsererror"。
//textStatus: "timeout", "error", "notmodified" 和 "parsererror"。
error: function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest.status);
/* XMLHttpRequest.readyState: 状态码的意思
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了*/
alert(XMLHttpRequest.readyState);
alert(textStatus);
},
success: function(data,status){//如果调用php成功
alert(status);
alert(data);
$('.con').html("用户名:"+data[0]+"密码:"+data[1]);
console.log(data[0]+data[1]);
},
//请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
complete: function(XMLHttpRequest, textStatus) {
this; // 调用本次AJAX请求时传递的options参数
console.log(this);
}
});
<?php
$name = $_POST['name'];
$pwd = $_POST['pwd'];
$array = array("$name","$pwd");
//这里进行一个些操作,比如数据库交互
echo json_encode($array);//json_encode方式是必须的
?>
传递到后台后,通过json_decode(data);来解码json。同样的可以查看解码的数据是否正确,则可以通过ajaxReturn()返回数据。
前台将数据封装起来,转成json串
data: {"testData" :JSON.stringify({test1: valu1,test2: valu2})},
后台解析json,将数据转换成 php 的数组
json_decode($_POST['testData'], true);
------------------------------------------------------------------------
二,html接收json文件,并进行遍历
data.json
[
{
"name":"张国立",
"phone":"188******0815",
"time":"2017/8/18",
"prize":"iphone6"
},
{
"name":"张国立",
"phone":"188******0815",
"time":"2017/8/18",
"prize":"iphone6"
},
{
"name":"张国立",
"phone":"188******0815",
"time":"2017/8/18",
"prize":"iphone6"
}
]
getjson.html
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//获取json的方法$.getJSON(url,[data],[callback])
$.getJSON("data.json",function(data){
var $jsontip = $("#jsonTip");
var strHtml = "";//存储数据的变量
$jsontip.empty();//清空内容
$.each(data,function(infoIndex,info){
strHtml += "姓名:"+info["name"]+"<br>";
strHtml += "性别:"+info["phone"]+"<br>";
strHtml += "邮箱:"+info["time"]+"<br>";
strHtml += "奖品:"+info["prize"]+"<br>";
strHtml += "<hr>"
})
$jsontip.html(strHtml);//显示处理后的数据
}) }) })
</script>
<div class="loadTitle">
<input type="button" value="获取数据" id="btn"/>
</div>
<div id="jsonTip">
</div>
------------------------------------------------------------------------------
三, html 从php获取数据
*************************简单数据********************************
<?php
$arr = array(
'name' => 'myname',
'jifen'=>'500',
'num' => '1',
);
$json_string = json_encode($arr); //格式化
echo "getProfile($json_string)";
?>
<label>名字:</label><div id="name"></div><br>
<label>积分:</label><div id="jifen"></div><br>
<label>次数:</label><div id="num"></div><br>
</body>
<script type="text/javascript">
function getProfile(arr) {
var arr = arr;
document.getElementById('name').innerHTML = arr.name;
document.getElementById('jifen').innerHTML = arr.jifen;
document.getElementById('num').innerHTML = arr.num;
}
</script>
//就是上面的php所在的文件
<script type="text/javascript" src="ajaxTest.php"></script>
<script type="text/javascript" src="jquery.js"></script>
在php文件里,用json_encode()这个函数将返回二维数组格式化了,
javascript是用xmlHttp.responseText接收,接收后需要使用JavaScript的eval进行处理后,才是Json对象。
var obj_json = eval(xmlHttp.responseText);
var username = $("#username").val();
------------------------------------------------
ajax的调用
async:false 使用同步方式
cache:true
ajax 返回值是json类型,在php这边接收时,选择用php输入流php://input 获取原始的输入内容;结果值要用json_encode, 对变量进行 JSON 编码。
----------------------------------------------------------------
一,html发送数据,php接受数据
$.post('ajax.php', //url 提交方式写在了开头
{name:username,pwd:password}, //内容
function(data) //成功
{
$.ajax({ //调用
url: "ajax.php", //URL
type: "POST", //提交方式
data:{name:username,pwd:password}, //内容
dataType: "json", //格式
error: function(){ //如果调用php失败
alert('Error loading XML document');
},
success: function(data,status){//如果调用php成功
alert(status);
alert(data);
$('.con').html("用户名:"+data[0]+"密码:"+data[1]);
}
});
$.ajax({
url: "ajaxTest2.php",
type: "POST",
data:{name:username,pwd:password},
dataType: "json",
//(默 认: 自动判断 (xml 或 html)) 请求失败时调用时间。
//参数有以下三个:XMLHttpRequest 对象、错误信息、(可选)捕获的错误对象。
//如果发生了错误,错误信息(第二个参数)除了得到null之外,
//还可能是"timeout", "error", "notmodified" 和 "parsererror"。
//textStatus: "timeout", "error", "notmodified" 和 "parsererror"。
error: function(XMLHttpRequest, textStatus, errorThrown){
alert(XMLHttpRequest.status);
/* XMLHttpRequest.readyState: 状态码的意思
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了*/
alert(XMLHttpRequest.readyState);
alert(textStatus);
},
success: function(data,status){//如果调用php成功
alert(status);
alert(data);
$('.con').html("用户名:"+data[0]+"密码:"+data[1]);
console.log(data[0]+data[1]);
},
//请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
complete: function(XMLHttpRequest, textStatus) {
this; // 调用本次AJAX请求时传递的options参数
console.log(this);
}
});
<?php
$name = $_POST['name'];
$pwd = $_POST['pwd'];
$array = array("$name","$pwd");
//这里进行一个些操作,比如数据库交互
echo json_encode($array);//json_encode方式是必须的
?>
传递到后台后,通过json_decode(data);来解码json。同样的可以查看解码的数据是否正确,则可以通过ajaxReturn()返回数据。
前台将数据封装起来,转成json串
data: {"testData" :JSON.stringify({test1: valu1,test2: valu2})},
后台解析json,将数据转换成 php 的数组
json_decode($_POST['testData'], true);
------------------------------------------------------------------------
二,html接收json文件,并进行遍历
data.json
[
{
"name":"张国立",
"phone":"188******0815",
"time":"2017/8/18",
"prize":"iphone6"
},
{
"name":"张国立",
"phone":"188******0815",
"time":"2017/8/18",
"prize":"iphone6"
},
{
"name":"张国立",
"phone":"188******0815",
"time":"2017/8/18",
"prize":"iphone6"
}
]
getjson.html
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//获取json的方法$.getJSON(url,[data],[callback])
$.getJSON("data.json",function(data){
var $jsontip = $("#jsonTip");
var strHtml = "";//存储数据的变量
$jsontip.empty();//清空内容
$.each(data,function(infoIndex,info){
strHtml += "姓名:"+info["name"]+"<br>";
strHtml += "性别:"+info["phone"]+"<br>";
strHtml += "邮箱:"+info["time"]+"<br>";
strHtml += "奖品:"+info["prize"]+"<br>";
strHtml += "<hr>"
})
$jsontip.html(strHtml);//显示处理后的数据
}) }) })
</script>
<div class="loadTitle">
<input type="button" value="获取数据" id="btn"/>
</div>
<div id="jsonTip">
</div>
------------------------------------------------------------------------------
三, html 从php获取数据
*************************简单数据********************************
<?php
$arr = array(
'name' => 'myname',
'jifen'=>'500',
'num' => '1',
);
$json_string = json_encode($arr); //格式化
echo "getProfile($json_string)";
?>
<label>名字:</label><div id="name"></div><br>
<label>积分:</label><div id="jifen"></div><br>
<label>次数:</label><div id="num"></div><br>
</body>
<script type="text/javascript">
function getProfile(arr) {
var arr = arr;
document.getElementById('name').innerHTML = arr.name;
document.getElementById('jifen').innerHTML = arr.jifen;
document.getElementById('num').innerHTML = arr.num;
}
</script>
//就是上面的php所在的文件
<script type="text/javascript" src="ajaxTest.php"></script>
<script type="text/javascript" src="jquery.js"></script>
在php文件里,用json_encode()这个函数将返回二维数组格式化了,
javascript是用xmlHttp.responseText接收,接收后需要使用JavaScript的eval进行处理后,才是Json对象。
var obj_json = eval(xmlHttp.responseText);
*************************多维数据********************************
还没写