JQuery中实现Ajax

简单小案例:

$("input").click(function() {

        $.get("test.txt",function(data){

 

            $("h1").html(data);

        });

    });

JQuery中,$.get()表示发出了一个异步的get请求;

语法:

$.get(路径?k=v&k=v,回调函数)

回调函数系统会自动的注入一个实参,就是哪个文本文件的内容;

JQuery中,$.post()表示发出了一个异步的post请求;

语法:

$.post(路径,{k:v,k:v},回调函数);

 $.get("chaxun.php?jiangyaochaxundeyonghuming="+$(this).val(),function(data){

 

            if(data == "you"){

 

                $(".tip").css("color","red").html("已经被占用了,换一个吧!");

            }else if( data == "meiyou"){

 

                $(".tip").css("color","green").html("恭喜,用户名可以使用");

 

            }

        })

注意:get请求的路径上面的黄底红字是真正的路径(URL),粉底儿蓝字是缀加的参数;

Data表示后台输出的结果;

<?php

    mysql_connect("localhost","root",123456);

    mysql_select_db("student");

    mysql_query("SET NAMES UTF8");

 

    $yaochaxundeyonghuming = $_GET["jiangyaochaxundeyonghuming"];

 

    // sql语句

    $sql = "SELECT * FROM banji0219 WHERE xingming = '{$yaochaxundeyonghuming}'";

    // 执行sql

    $result = mysql_query($sql);

    // 把输出结果转换成个数

    $tiaoshu = mysql_num_rows($result);

    if( $tiaoshu > 0){

        echo "you";

    }else{

        echo "meiyou";

    }

 

?>

mysql_num_rows()//统计条数

$.post("zhuce.php",{

            yonghuming:$("#yonghuming").val(),

            mima:$("#mima").val()

 

        },function(data){

            if( data == "charuchenggong" ){

 

                alert("恭喜,成功");

 

            }else if( data == "shibai" ){

 

                alert("sorry");

            }

        });

红色是URL地址,紫字是参数,格式是JSON格式;data是后台的输出的结果;

前台页面得到data后,可以用DOM方法自由的局部“刷新”页面!

原文地址:https://www.cnblogs.com/pms01/p/6842393.html