ajax返回用户名，密码

浏览数：161 / 时间：2015年06月09日

截图如上：

代码如下：
$(document).ready(function(){
$("#button_login").mousedown(function(){

var username = $("#username").val();
var password = $("#password").val();
//一个Ajax过程
$.ajax({
type: "post", //以post方式与后台沟通
url : "login.php", //与此php页面沟通
dataType:‘json‘,//从php返回的值以 JSON方式解释
data: ‘username=‘+username+‘&password=‘+password, //发给php的数据有两项，分别是上面传来的u和p
success: function(json){//如果调用php成功,把php中的返回值显示在预定义的result定位符位置
$(‘#result‘).html("姓名:" + json.username + "<br/>密码:" + json.password);
}
});
});
});

代码要引入jquery库！

HTML代码如下：
<div id="result" style="background:#eee;border:1px solid #777;width:300px;height:200px; padding:10px;"></div>
<form id="formtest" action="" method="post">
<p><span>输入姓名:</span><input type="text" name="username" id="username" /></p>
<p><span>输入密码:</span><input type="text" name="password" id="password" /></p>
</form>
<button id="button_login">ajax提交</button>

login.php放在同一文件夹下，代码如下：
<?php
echo json_encode(array (‘username‘=>$_REQUEST[‘username‘],‘password‘=>$_REQUEST[‘password‘]));
?>

同时，ajax代码还可以这样写：
//$.post()方式：
$(‘#test_post‘).mousedown(function (){
$.post(
‘login.php‘,
{
username:$(‘#username‘).val(),
password:$(‘#password‘).val()
},
function (data) //回传函数
{
var myjson=‘‘;
eval(‘myjson=‘ + data + ‘;‘);
$(‘#result‘).html("姓名1:" + myjson.username + "<br/>密码1:" + myjson.password);
}
);
});
//$.get()方式：
$(‘#test_get‘).mousedown(function ()
{
$.get(
‘login.php‘,
{
username:$(‘#username‘).val(),
password:$(‘#password‘).val()
},
function(data) //回传函数