使用ajax在JavaScript中提交和顯示表單數據

Question

我的任務是根據以下要求結合使用HTML / CSS / JavaScript / jQuery的技能來解決代碼塊：

要求：-通過add_user函數使用ajax提交用戶輸入的數據。
-您可以假定該服務將以200狀態響應。
-當添加用戶服務的成功屬性為false時，在窗體頂部以紅色顯示錯誤。 使用error屬性作為消息。
-當響應返回成功屬性時，在用戶列表中顯示新用戶
-當用戶輸入無效的電子郵件地址時，突出顯示電子郵件輸入。 另外，以紅色顯示文本“請輸入有效的電子郵件地址”。
注意：該服務將不提供此驗證功能，並且將接受無效的電子郵件。

//example usage.
addUser('john', 'smith', function(response){
    console.log('response is: ' + JSON.stringify(response)); 
});

/*
################################### DO NOT MODIFY BELOW THIS LINE ##########
############################################################################
*/
// Add user service wrapper.
function addUser(username, email, callback) {
    var response;

    if(username === "Error"){
        response = JSON.stringify({
            success: false,
            error: "Error is not acceptable username."
        });
    } else {
        response = JSON.stringify({
            success: true,
            user: {
                username: username,
                email: email
            }
        });   
    }

    $.ajax({
        url: '/echo/json/',
        type: "post",
        data: {
            json: response
        },
        success: callback
    });
};

以下HTML適用：

<h2>Add a User:</h2>
<form>
    <input type="text" name="username" placeholder="name">
    <input type="email" name="email" placeholder="email">
    <button>add user</button>
</form>
<h2>Users:</h2>
<ul id="users"></ul>

CSS：

body {
    font-family: Helvetica, Sans, Arial;
}
p, ul {
    padding: 10px;
}
ul {
    margin: 5px;
    border: 2px dashed #999;
}

好吧，希望你還和我在一起。 我對面向對象的JavaScript以及jQuery，HTML和CSS有深刻的理解。 但是，我對AJAX的經驗很少，對JSON語法/應用程序的經驗也很少。 因此，該項目的某些方面對我來說似乎很簡單，我認為在解決這些問題時不需要幫助。 我已經知道如何正確執行的操作包括：

• 在表單上方以紅色顯示錯誤（檢索錯誤信息是另一回事）
• 在無序列表部分顯示新用戶
• 輸入無效的電子郵件地址時，突出顯示電子郵件輸入（使用客戶端驗證）

我在理解該項目時遇到的問題集中在提交和檢索在表單中輸入的數據。 似乎函數addUser（）首先使用“對象”的“字符串”數據類型版本定義了變量響應，其中包含“成功：布爾值，錯誤：字符串”或“成功：布爾值，用戶”的鍵：值對：{username：string，email：string}'-這是我遇到第一個麻煩的地方...

如果要依靠包含那些key：value對的對象來確定在驗證期間是否發生了錯誤，並且要檢索諸如錯誤消息以及與用戶名和電子郵件相關聯的字符串之類的數據，則將它們保留下來是很有意義的。作為實際對象，而不是“字符串化”對象。 作為字符串，我不知道如何訪問該對象的屬性值。 如果它們是對象，我可以簡單地使用點表示法引用它們並檢索其屬性的值。 （即sampleObj.success或sampleObj.error）似乎eval（）和JSON.parse（）之類的JavaScript函數足以將這些字符串返回到適當的對象中，但是我不知道如何正確實現這些函數。

我遇到的第二個主要問題與.ajax（）方法的jQuery調用有關。 我對AJAX的運作方式非常初級，但是這里使用的語法使我感到困惑。 我知道數據：{json：response}正在使用類型：“ post”發送到url：'/ echo / json /'，但是我不明白在發生這種情況后如何檢索該數據。 我也不清楚在此過程中“響應”的含義是什么。

最后，我不了解在$ .ajax（）語句末尾使用回調函數的原因，以及單擊表單按鈕輸入后它與addUser（）函數的初始調用之間的關系。 我不了解其目的，也不了解如何在語法上使用它。

我知道這是一個相當復雜的項目，我可能會提出很多要求。 但是我花了幾天時間，花了很多時間試圖利用我自己的知識和現有的在線資源來理解這一點，但是盡管我很努力，但還沒有走得很遠。 我希望有人可以幫助我理解這個例子。

指向該項目的實時版本的鏈接（jsfiddle.net）

//編輯// jsfiddle工作流的更新鏈接，帶有正確的jQuery選擇器和用於顯示錯誤消息的附加功能/用戶輸入： http : //jsfiddle.net/brianjsullivan/5vv5w/

Answer 1

問題是您忘記了代碼中的# （id）：

JSFIDDLE

$(document).ready(function(){
    $('#button').click(function(){
        $userInput = $('#username').val();
        $emailInput = $('#email').val();

        addUser($userInput,$emailInput,function(response){
            $('#users').html(JSON.stringify(response));
        });
    });    
});

Answer 2

將您的代碼更改為

$(document).ready(function(){
 $('#button').click(function(){
    $userInput = $('#username').val();
    $emailInput = $('#email').val();

    addUser($userInput,$emailInput,function(response){
        $('#users').html(JSON.stringify(response));
    });
 });
});

這是小提琴 。

Answer 3

JSON / string問題只是對JSON和JSON對象進行一些試驗/熟悉而已，但是需要大量解釋來代替一些測試，因此，我將重點介紹問題的第2部分和第3部分。 也許其他人比我更有能力解決第一部分。

AJAX代碼塊（1）定義一些帶有值的變量，（2）將它們發送到服務器端腳本進行處理，（3）接收來自服務器的響應。

“舊的”構造（我們現在使用Promises接口）是設想AJAX如何工作的最簡單方法：

$.ajax({
    type: "POST",
    url:  "pagename.php",
    data: "varName=" +varValue+ "&nextVarName=" + nextVarValue,
    success: function(returned_data) {
        //Var returned_data is ONLY available inside this fn!
        alert("Server said: " + returned_data);
    }
});

在服務器端（此示例使用PHP）：

<?php

    $one = $_POST['varName'];  //$one contains varValue
    $two = $_POST['nextVarName'];  //$one contains nextVarValue

    //Do something with the received data, for eg a MySQL lookup

    $result = mysql_result(mysql_query(some lookup),0);

    $out = '<h1>Server says:</h1>';
    $out .='<p>For the purpose of this test, the server sends back:</p>';
    $out .= $result;

    echo $out;  //NOTE: uses echo, not return

無論服務器端發送到瀏覽器的內容是什么，我們都會將其命名為returned_data 。

注意，我們只能在成功函數中處理該變量。 如果以后需要訪問它，可以將內容保存到全局變量中，也可以將數據注入到隱藏的DOM元素中，或者...

但是，如今，您希望使用promises接口-本質上是做同樣的事情，但是對於SO帖子中的解釋目的並不清楚。 見下文：

資料來源：

Kevin Chisholm在jQuery Promise界面上
jQuery 4 U
丹尼爾·德梅爾（Daniel Demmel）談諾言
何塞·羅曼尼洛