截图如上:
代码如下:
$(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) //回传函数
ajax返回用户名,密码
原创
©著作权归作者所有:来自51CTO博客作者lvtaolian的原创作品,请联系作者获取转载授权,否则将追究法律责任
下一篇:原生态js定时器代码
![](https://ucenter.51cto.com/images/noavatar_middle.gif)
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
ORA-65096: 公用用户名或角色名无效oracle oracle用户登录 ORA-65096
-
springmvc(ajax返回集合、用户名校验)
1、iframe测试体验页面无刷新 (1)书写一个页面 <!DOCTYPE html> <html lang
spring xml html mvc 数据 -
006 ajax验证用户名
1.大纲 2.index.jsp 3.ValidateUserName.java 4.web.xml映射 5.效果
java xml html javascript jquery