使用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）谈诺言
何塞·罗曼尼洛