ajax在php中应用实例_ajax在php中的应用-优快云博客

本文通过具体示例介绍了Ajax的各种形式（如$.ajax()、$.get()、$.post()等）及其在用户登录验证中的应用，并展示了如何利用JSONP实现Ajax跨域数据获取。

1，ajax分为$.ajax()，$.get()，$.post()，$.getJSON() 几种形式，实例如下：

<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="application/javascript" src="../js/jquery-1.7.2.js"></script>
<script type="application/javascript">
$(document).ready(function(){
    $("#ajaxBut").click(function(){
        $.ajax({
            'type':'get',
            'url':'test4.php',
            'dateType':'json',
            'data':$("input").serialize(),
            'success':function(ret){
                alert(ret);
            }
        });
 
    });
    $("#getBut").click(function(){
        $.get("test4.php",$("input").serialize(),function(ret){
            alert(ret);
        });
    });
    $("#postBut").click(function(){
        $.post("test5.php",$("input").serialize(),function(ret){
            alert(ret);
        });
    });
    $("#jsonBut").click(function(){
        $.getJSON("test4.php",$("input").serialize(),function(ret){
            alert(ret);
        });
    });
 
});
</script>
<body>
<form>
    <h1>user Login</h1>
    username:<input type="text" name="user" id="user" /><br/>
    password:<input type="password" name="password" id="password"/><br/>
    <input type="button" name="but" id = "ajaxBut" value="ajaxLogin" />
    <input type="button" name="but" id = "postBut" value="postLogin" />
    <input type="button" name="but" id = "getBut" value="getLogin" />
    <input type="button" name="but" id = "jsonBut" value="jsonLogin" />
</form>
</body>
</html>

test4.php

<?php
$username = $_GET['user'];
$password = $_GET['password'];
$ret = "fail";
if($username == 'zhangsan' && $password == '123'){
    $ret = "success";
}
echo json_encode($ret);

test5.php

<?php
$username = $_POST['user'];
$password = $_POST['password'];
$ret = "fail";
if($username == 'zhangsan' && $password == '123'){
    $ret = "success";
}
echo json_encode($ret);

2，ajax跨域获取数据，使用到jsonp，实例如下：

$.getJSON("http://www.ganji.com/test6.php?callback=?", $("input").serialize() , function(data){
   if(data){
       console.log(data);
   }
});

test6.php

$str = 'OK';
$callback = $_GET('callback');
    if (!empty($callback)) {
        header("content-type: application/x-javascript; charset=UTF-8");
        echo $callback . '(' . $str . ')';
    } else {
        echo $str;
    }
}     