使用Ajax在JavaScript

我一直負責用我的技能，HTML/CSS/JavaScript的/ jQuery的根據這些要求來解決的代碼塊提交和顯示形式數據：使用Ajax在JavaScript

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

//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; 
}

OK，希望你還在我身邊。我對面向對象的JavaScript以及jQuery，HTML和CSS有深入的理解。但是，我對AJAX的經驗很少，沒有JSON語法/應用程序的經驗。因此，這個項目的某些方面對我來說似乎很直接，我不相信我需要幫助來解決它們。 我已經知道如何正確地做的事包括：

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

我理解這個項目的重點提交和檢索是輸入數據，遇到的問題編輯表格。看起來好像函數addUser（）首先定義了變量響應，其中包含'成功：布爾，錯誤：字符串'或'成功：布爾，用戶'鍵值對的'對象'的'字符串'數據類型版本：{用戶名：字符串，電子郵件：字符串}' - 這是我進入我的第一個麻煩區域的地方...

如果包含這些關鍵字：值對的對象用於確定是否驗證過程中發生錯誤，並檢索與用戶名和電子郵件相關的錯誤消息和字符串等數據，將它們保留爲實際對象而不是「字符串化」對象是有意義的。作爲字符串，我不知道如何訪問該對象的屬性的值。如果它們是對象，我可以簡單地用點符號引用它們並檢索它們的屬性值。（即sampleObj.success或sampleObj.error）好像JavaScript函數（如eval（）和JSON.parse（））足以將這些字符串返回到適當的對象中，但我不知道如何正確實現這些函數。

我遇到的第二個主要問題涉及到.ajax（）方法的jQuery調用。我對AJAX的運作有一個非常基本的理解，但這裏使用的語法讓我感到困惑。我知道數據{json：response}正在使用類型'post'發送到url：'/ echo/json /'，但我不明白在發生這種情況後如何恢復數據。我也不明白'迴應'在這個過程中所指的是什麼。

最後，我不明白在$ .ajax（）語句末尾使用回調函數，以及它如何與作爲點擊表單按鈕的結果的addUser（）函數的初始調用相關輸入。我不明白它的目的，或者它將如何在語法上使用。

我知道這是一個相當複雜的項目，我可能會問很多。但是我花了好幾個小時花了好幾個小時，試圖用我自己的知識和現有的在線資源來理解這一點，但儘管我很勤奮，但並沒有走得很遠。我希望有人能幫助我理解這個例子。

A link to a live version of this project (jsfiddle.net)

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

來源

2013-09-25 Brian S

您可能希望看到[這]（http://stackoverflow.com/questions/425095/ submit-form-using-ajax-and-jquery）以及[This]（http://stackoverflow.com/questions/12715994/how-do-i-submit-form-data-using-jquery-ajax）。 –

的問題是，你忘記了# （ID）在你的代碼：

JSFIDDLE

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

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

來源

2013-09-25 18:29:08 aldanux

當然，我以前使用過核心JS來處理這個項目，最近才實現了jQuery，並且我忘記了特定的語法怪癖。感謝您指出這一點，看到一些進展令人耳目一新！ –

更改您的代碼

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

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

這裏是Fiddle。

來源

2013-09-25 18:34:08

你的小提琴沒有工作......你忘了'用戶名'和'電子郵件'中的'＃'（id） – aldanux

謝謝，我忘了說我正在創建一個基於這些HTML元素的ID的jQuery對象，使用'＃'符號。 –

我不能完全包裹頭部的東西涉及addUser（）調用中提供的回調函數。如果'響應'是一個變量，直到addUser（）開始運行纔會被聲明，那麼在這種情況下它可以作爲參數發送呢？我沒有看到變量'響應'在這個代碼的進展中的意義。 –

JSON /字符串問題是一個小實驗/熟悉JSON和JSON對象的問題，但需要大量的解釋來代替一些測試，所以我將重點討論您的問題的第2部分和第3部分。也許其他人比我更能夠解決第一部分問題。（1）用值定義一些變量，（2）將它們傳送到服務器端腳本進行處理，（3）從服務器接收響應。

「老」建築（我們現在使用的承諾接口）是想象的最簡單的方法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 on jQuery Promise Interface
jQuery 4 U
Daniel Demmel on Promises
José F. Romaniello

來源

2013-09-25 19:09:35 gibberish

感謝這個過程的詳細解釋！我仍然在回顧您提供的信息，因爲我仍然沒有完全理解這個概念，但這是我理解中的一大進步。爲了您的參考，這裏是我的項目更新jsfiddle的鏈接。在你和他人的幫助下，我能夠制定滿足所有要求的項目解決方案。 [這裏是鏈接]（http://jsfiddle.net/brianjsullivan/5vv5w/） –

使用Ajax在JavaScript

回答

相關問題