基于JQuery框架的AJAX实例

最新推荐文章于 2021-06-28 08:02:51 发布

huminghai

最新推荐文章于 2021-06-28 08:02:51 发布

阅读量761

点赞数

分类专栏： jquery 文章标签： ajax jquery 框架 function login button

本文链接：https://blog.csdn.net/huminghai/article/details/4764105

版权

jquery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

index.html

<html>
<head>
<title>jQuery Ajax 实例演示</title>
</head>

function login(){ //函数 login();
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成功

                        //alert(json.username+'/n'+json.password); //把php中的返回值（json.username）给 alert出来

   $('#result').html("姓名:" + json.username + "<br/>密码:" + json.password); //把php中的返回值显示在预定义的result定位符位置


                          }
           });



//$.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) //回传函数
      {
        var myjson='';
        eval("myjson=" + data + ";");
        $('#result').html("姓名2:" + myjson.username + "<br/>密码2:" + myjson.password);
      }
    );
});




}
</script>