從不同的Javascript函數中檢索AJAX值

Question

在這個更大的Web應用程序的簡化示例中，考慮一個簡單的注冊表單，其中包含以下字段：username，firstname，lastname和Register button type="button" 。

<form action="" method="post" id="cns_form">
    <table id="companyTable"><tr>
        <td width="200">
            First name*:<br />
            <input type="text" id="first_name" name="first_name">
        </td>
        <td width="200">
            Last name*:<br />
            <input type="text" id="last_name" name="last_name">
        </td>
    </tr></table>
    <input type="button" value="Register" id="register" >
</form>
<div id="alert" title="Alert"></div>

---

當用戶名字段完成后，jQuery將觸發數據庫的ajax搜索，以查看該用戶名是否已存在。 當單擊Register時也會觸發相同的搜索（出於從此簡化示例中刪除的原因）。

問題：離開用戶名字段時一切正常。 但是，單擊注冊后 ，我不知道如何檢索AJAX搜索的結果，如果用戶名已經存在，則停止提交表單。 我已嘗試過各種不同的東西，但已將代碼返回到此狀態，因此讀者最容易提供幫助。

例如，我嘗試集成這個問題的建議解決方案，但我沒有成功應用它到我的情況...我嘗試在ajax函數中設置async:false ...我也嘗試從內部調用checkUsername（uname） checkForm函數，但這也不起作用。 一點幫助？

jQuery document.ready：

$(function(){
    $('#username').blur(function() {
        var uname = $.trim($(this).val());
        checkUsername(uname);
    }); //END BLUR username

    $('#register').click(function() {
        var uname = $.trim($( '#username').val());
        checkUsername(uname);
        checkForm();
    });
}); //END document.ready

---

AJAX電話：

function checkUsername(uname) {
        if (uname != '') {
            $.ajax({
                type: "POST",
                url: 'ajax/ax_all_ajax_fns.php',
                data: 'request=does_this_username_already_exist&username=' + uname,
                async: false,
                success:function(data){
//alert('Returned AJAX data: '+data);
                    if (data != 0) {
                        var existing_user = data.split('|');
                        var fn = existing_user[0];
                        var ln = existing_user[1];
                        focus_control = 'username';
                        $( '#alert' ).html( 'That username is already in use by ' + fn +' '+ ln +'. Please choose another.' );
                        $( '#alert' ).dialog( 'open' );
                    } //EndIf data<>0
                } //End success
            }); //End $.ajax
        } //End If this.val <> ""
}

---

checkForm功能：

function checkForm() {
    var un = $.trim($( '#username').val());
    var fn = $( '#first_name').val();
    var ln = $( '#last_name').val()

    if (un=='' || fn=='' || ln=='') {
        $( '#alert' ).dialog({
            height: 200,
            width: 300,
        });
        $( '#alert' ).html( 'Fields marked with an asterisk are required.' );
        $( '#alert' ).dialog( 'open' );
    } else {
        $("#cns_form").submit();
    }
}

Answer 1

在回答他自己的問題時，一個人都歡喜和哭泣，但是這里有。 解決方案是將checkUsername（）函數作為輸入參數發送到checkForm（）函數，並使checkUserName（）函數返回一個我們可以在checkForm（）中檢查的值。

因此，我們必須修改$('#register').click功能：

$('#register').click(function() {
    var uname = $.trim($( '#username').val());
    checkForm(checkUsername(uname)); //<===========================
});

---

那么 checkUsername（）函數，因此：

function checkUsername(uname) {
        var returnVal = 0; //<=================================
        if (uname != '') {
            $.ajax({
                type: "POST",
                url: 'ajax/ax_all_ajax_fns.php',
                data: 'request=does_this_username_already_exist&username=' + uname,
                async: false,
                success:function(data){
//alert('Returned AJAX data: '+data);
                    if (data != 0) {
                        var existing_user = data.split('|');
                        var fn = existing_user[0];
                        var ln = existing_user[1];
                        focus_control = 'username';
                        $( '#alert' ).html( 'That username is already in use by ' + fn +' '+ ln +'. Please choose another.' );
                        $( '#alert' ).dialog( 'open' );
                        returnVal = 0; //<============================
                    } //EndIf data<>0
                } //End success
            }); //End $.ajax
        } //End If this.val <> ""
    return returnVal; //<==============================
}

---

和 checkform（）函數因此：

function checkForm(exists) { //<============================
alert('sub checkForm(). value of exists: ' + exists);
    if (exists==9) { //<================================
        $( '#alert' ).html( 'That username is already in use' + existing +'. Please choose another.' );
        $( '#alert' ).dialog( 'open' );
    }else{ //<==========================================
        var un = $.trim($( '#username').val());
        var fn = $( '#first_name').val();
        var ln = $( '#last_name').val()

        if (un=='' || fn=='' || ln=='') {
            $( '#alert' ).dialog({
                height: 200,
                width: 300,
            });
            $( '#alert' ).html( 'Fields marked with an asterisk are required.' );
            $( '#alert' ).dialog( 'open' );
        } else {
            $("#cns_form").submit();
        }
    } //<===================================================
}

感謝Felix Kling的這篇有用的帖子 。

Answer 2

可能會在HTML表單標記的函數調用中return false 。

<form>
    <bunchOfElements />
    <button onclick="checkUserName(); return false">Check Name </button>
</form>

此外，您可以使用將該函數綁定到按鈕的單擊事件

$(document).ready(function(){
    $("#buttonID").bind('click', function(){ 
        //do your thing
        checkForm();
    });
});

Answer 3

在#register按鈕單擊函數的末尾放置一個return false ，就在checkForm()下面。 該按鈕繼續觸發表單提交。 當你有你的javascript函數處理。