国产中文欧美日韩在线,欧美日韩亚洲国产综合乱

首頁 > 博客列表 > JQuery之Ajax操作（0919）

博主信息

博文 35

粉絲 0

評(píng)論 0

訪問量 44165

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

實(shí)例：注冊(cè)頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用戶注冊(cè)</title>
</head>
<body>
<h3>用戶注冊(cè) $.post()</h3>

<p><label for="email">郵箱 / 手機(jī):</label><input type="email" id="email" name="email"></p>
<p><label for="password">請(qǐng)輸入密碼:</label><input type="password" id="password" name="password"></p>
<p><button>注冊(cè)</button></p>

<script src="lib/jquery.js"></script>
<script>
    $('button').click(function(){
        console.log($('#input_type'));

        if ($('#email').val().length === 0) {
            $('#email').after('<span style="color:red">郵箱/手機(jī)不能為空</span>').next().fadeOut(2000);
            $('#email').focus();
            return false;
        } 

        if ($('#email').val().length === 11) {
            if (!$("#email").val().match(/^(((13[0-9]{1})|159|153)+\d{8})$/)) { 
                $('#email').after('<span style="color:red">手機(jī)號(hào)碼不正確</span>').next().fadeOut(2000);
                $('#email').focus();
                return false;
            }
        }else if (!$("#email").val().match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)){
            $('#email').after('<span style="color:red">郵箱格式不正確</span>').next().fadeOut(2000);
            $('#email').focus();
            return false;
        }

        if ($('#password').val().length === 0) {
            $('#password').after('<span style="color:red">密碼不能為空</span>').next().fadeOut(2000);
            $('#password').focus();
            return false;
        } else if($('#password').val().length < 6) {
            $('#password').after('<span style="color:red">密碼不能少于6位</span>').next().fadeOut(2000);
            $('#password').focus();
            return false;
        }




        $.post(
          'inc/register.php',      // 處理post請(qǐng)求的php腳本

            // 要發(fā)送到服務(wù)器上的數(shù)據(jù)
            // 查詢字符串形式的數(shù)據(jù)
            // 'email='+$('#email').val()+'&password='+$('#password').val(),
            // 對(duì)象字面量形式,最終也會(huì)轉(zhuǎn)為查詢字符串
            {
                email: $('#email').val(),
                password: $('#password').val()
            },
            // 請(qǐng)求成功的回調(diào)
            function(data,status,xhr) {
                // console.log(data,status,xhr);  // 查看返回的數(shù)據(jù)
                // 實(shí)際開發(fā)過程中,大多只用到data,status和xhr極少使用,另外,data和status也可用xhr對(duì)象獲取
                console.log($(this));
                // console.log(data.message);
                if (data.status === 1) {
                    $('button')     // 選擇當(dāng)前按鈕
                        .after('<span style="color: green"></span>')    // 在按鈕后添加一個(gè)<span>用來顯示提示信息
                        .next()     // 切換到button的下一個(gè)兄弟元素,這時(shí)就是剛剛添加的<span>
                        .html(data.message) // 設(shè)置<span>中的文本內(nèi)容
                        .fadeOut(3000);     // 將<span>的內(nèi)容2秒后淡出
                } else {
                    $('button')
                        .after('<span style="color: red"></span>')
                        .next()
                        .html(data.message)
                        .fadeOut(2000);
                }
            },
            'json'  // 返回的數(shù)據(jù)類型
        );
    })
</script>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例：調(diào)用后臺(tái)的注冊(cè)服務(wù)php

<?php
//echo json_encode('測(cè)試數(shù)據(jù)');

//連接數(shù)據(jù)庫并驗(yàn)證用戶信息
$email = htmlspecialchars(trim($_POST['email']));
$password = sha1(htmlspecialchars(trim($_POST['password'])));

$pdo = new PDO('mysql:host=localhost;dbname=php','root','root');
$sql = "SELECT COUNT(*) FROM `user` WHERE `email`= :email ";
$stmt = $pdo->prepare($sql);
$stmt->execute(['email'=>$email]);

if ($stmt->fetchColumn(0) == 1) {
    $status = 0;
    $messsage = '郵箱/手機(jī)已經(jīng)注冊(cè)過了！!';
} else {
    $status = 1;
    $pdo = new PDO('mysql:host=localhost;dbname=php','root','root');
	$sql = "INSERT `user` SET `user_name`= :name , `email`= :email, `password`= sha1(:password)";
	$stmt = $pdo->prepare($sql);

	$data = ['name'=>$email,'email'=>$email,'password'=>$password];
	$stmt->bindParam(':name',$data['name'],PDO::PARAM_STR);
	$stmt->bindParam(':email',$data['email'],PDO::PARAM_STR);
	$stmt->bindParam(':password',$data['password'],PDO::PARAM_STR);

	if ($stmt->execute()) {
	    $messsage = '注冊(cè)成功！';
	} else {
	    $messsage = '注冊(cè)失?。?#39;;
	}
}
echo json_encode(['status'=>$status,'message'=>$messsage]);

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

運(yùn)行效果圖：

編程2: 用ajax實(shí)現(xiàn)省/市/縣三聯(lián)下拉框聯(lián)動(dòng)查詢功能，可使用json完成。

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作業(yè)提示:  三級(jí)聯(lián)動(dòng)菜單</title>
</head>
<body>
省 <select name="" id="pro"></select>
市 <select name="" id="city"></select>
區(qū) <select name="" id="area"></select>
<p id="addr"></p>
<script src="lib/jquery.js"></script>
<script>
    $(function(){
        $.getJSON('inc/1.json',function(data){
            let option = '<option value="">選擇(省)</option>';
            $.each(data,function(i){
                option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
            });
            $('#pro').html(option);

        });

        $('#pro').change(function(){
            //查看當(dāng)前選擇中元素內(nèi)容
            console.log($(this).find(':selected').text());

            $.getJSON('inc/2.json',function(data){
               let option = '<option value="">選擇(市)</option>';
                $.each(data,function(i){
                    if (data[i].proId == $('#pro').val()) {
                        option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
                    }
                });
                $('#city').html(option);
            });
        });
        $('#city').change(function(){
            //查看當(dāng)前選擇中元素內(nèi)容
            console.log($(this).find(':selected').text());
            $.getJSON('inc/3.json',function(data){
                let option = '<option value="">選擇(縣區(qū))</option>';
                $.each(data,function(i){
                    if (data[i].cityId == $('#city').val()) {
                        option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
                    }
                });
                $('#area').html(option);
            });
        });

        $('#area').change(function(){
            //查看當(dāng)前選擇中元素內(nèi)容
            console.log($(this).find(':selected').text());
            let addr = $('#pro').find(':selected').text()+$('#city').find(':selected').text()+$('#area').find(':selected').text();
            $('#addr').html(addr);
        });

        //思考: 如何將獲取到的內(nèi)容,及時(shí)的回顯到頁面中,動(dòng)態(tài)的提示用戶當(dāng)前的選擇內(nèi)容,實(shí)現(xiàn)數(shù)據(jù)綁定
    })
</script>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

運(yùn)行效果圖：

總結(jié)：JQuery的Ajax操作方便快捷，需要多多練習(xí)，看懂老師課堂的程序沒有問題，自己找相應(yīng)的DOM方法就因?yàn)椴皇煜ざ械牟恢搿?/p>

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！

全部評(píng)論文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議

0條評(píng)論

作者最新博文

設(shè)計(jì)模式和MVC（0907）

2018-09-10 22:59:02

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

實(shí)例：注冊(cè)頁面

實(shí)例：調(diào)用后臺(tái)的注冊(cè)服務(wù)php

實(shí)例