您的位置 >>> 星想互联 >>> 编程技术 >>> JQUERY+JS
使用AJAX实现表单交互
点击数:407  发布时间2018-03-03 22:58:31

index.html页面使用ajax操作:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:300px;min-height:200px;background:#eee;}
</style>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("#b_ajax").click(function(){
var username=$("#username").val();
var pwd     =      $("#pwd").val();
$.ajax({
type:"POST",
url:"login.php",
dataType:"json",
data:'username='+username+'&pwd='+pwd,
success:function(data){
$("div").append(data.username+'<br>'+data.pwd+'<br>');
}
})
})

$("#b_post").click(function(){
$.post('login.php',{username:$("#username").val(),pwd:$("#pwd").val()},function(data){
 var myjson = eval("("+data+")");
 //$("div").html(myjson.username+myjson.pwd)
 ss=myjson.username;
 $("div").append(ss+'<br>');
})
})

$("#b_get").click(function(){
$.get(
 'login.php',
 {
 username:$("#username").val(),
 pwd:$("#pwd").val()
 },
 function(data){
var ss=""
var obj = eval("("+data+")");
ss=obj.username+'<br>';
$("div").append(ss)
 }
)
})
})
</script>
</head>

<body>
<div></div>

  <p>
    <label for="textfield">姓名:</label>
    <input type="text" name="username" id="username" />
  </p>
  <p>
    <label for="textfield2">密码:</label>
    <input type="text" name="pwd" id="pwd" />
  </p>
  <p>
    <input type="submit" name="button" id="b_ajax" value="ajax提交" />
    <input type="submit" name="button3" id="b_post" value="post提交" />
    <input type="submit" name="button2" id="b_get" value="get提交" />
    <input type="submit" name="button4" id="button" value="提交" />
  </p>
</body>
</html>


logon.php页面提供数据:

<?php echo json_encode(array('username'=>$_REQUEST['username'],'pwd'=>$_REQUEST['pwd'])); ?>


来源:咸宁网站建设