使用ajax以JavaScript提交和显示表单数据

我的任务是使用我的HTML/CSS/JavaScript/jQuery技能，根据以下要求解决一段代码：

要求： -通过添加用户功能使用ajax提交用户输入的数据。
-您可以假设服务将以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>

好吧，希望你还和我在一起。我对面向对象的JavaScript以及jQuery、HTML和CSS有很强的理解。但是，我对AJAX的经验很少，对JSON语法/应用程序的经验也很少。因此，这个项目的某些方面对我来说似乎非常简单，我不认为我需要帮助来弄清楚它们我已经知道如何正确处理的事情包括：

• 在表单上方以红色显示错误（检索错误信息是另一回事）
• 在无序列表部分显示新用户
• 输入无效电子邮件地址时突出显示电子邮件输入（使用客户端验证）

我在理解这个项目时遇到的问题主要是提交和检索表单中输入的数据。似乎函数addUser（）首先使用包含“success:boolean，error:String”或“success:boolean，user:{username:String，email:String}”的键：值对的“Object”的“String”数据类型版本定义变量响应，这是我遇到的第一个问题

如果要依赖包含这些key:value对的对象来确定验证期间是否发生了错误，并检索错误消息和与用户名和电子邮件相关联的字符串等数据，那么将它们保留为实际对象而不是“字符串化”对象是有意义的。作为字符串，我不知道如何访问该对象的属性值。如果它们是对象，我可以简单地使用点符号引用它们并检索它们的属性值。（即sampleObj.success或sampleObj.error）似乎eval（）和JSON.parse（）等JavaScript函数足以将这些字符串返回到适当的对象中，但我不知道如何正确实现这些函数

我遇到的第二个主要问题与.ajax（）方法的jQuery调用有关。我对AJAX的运行方式有一个非常初步的了解，但是这里使用的语法让我感到困惑。我知道数据：{json:response}正在使用类型“post”发送到url:“/echo/json/”，但我不知道在发生这种情况后如何检索该数据。我也不明白在这个过程中，“回应”的价值是指什么

最后，我不理解$.ajax（）语句末尾回调函数的用法，以及它与单击表单按钮输入后addUser（）函数的初始调用的关系。我不明白它的目的，也不明白它在句法上是如何使用的

我知道这是一个相当复杂的项目，我可能要求很多。但几天来，我用自己的知识和现有的在线资源花了很多时间试图弄明白这一点，但尽管我很努力，还是没走多远。我希望有人能帮助我理解这个例子

---

//编辑//到JSFIDLE工作流的更新链接，带有正确的jQuery选择器和显示错误消息/用户输入的附加功能：

问题在于您忘记了代码中的

#

（id）：

将代码更改为

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

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

---

这里是。

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）：

---

您可能也想看看。当然，我以前使用core JS来处理这个项目，直到最近才实现jQuery，我忘记了那个特殊的语法怪癖。谢谢你指出这一点，看到一些进展令人耳目一新！你的小提琴不起作用了……你忘记了
username
和
email
中的

#`（id）谢谢，我忘了指出我正在使用“#”符号基于这些HTML元素的id创建一个jQuery对象。有些事情我不能完全理解，与addUser（）调用中提供的回调函数有关。如果“response”是一个直到addUser（）开始运行才声明的变量，那么在这种情况下，它怎么可能作为参数发送？我看不出变量“response”在这段代码的进程中有什么意义。在JQuery ajax中，有一个成功回调函数处理来自服务器的响应，例如success:function（responseData）{}。在您的例子中，您可以注意到ajax方法中有一个代码片段success:callback，其中callback是一个函数，其中response是您提供给addUser的一个参数

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

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

$.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

    $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