Question

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

要求： - 通过add_user函数使用ajax提交用户输入的数据 - 您可以假设该服务将以200状态响应 - 当添加用户服务使用值为false的success属性响应时，在表单顶部显示红色错误。使用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（）首先使用'Object'的'String'数据类型版本定义变量响应，该'Object'包含'success：boolean，error：string'或'success：boolean，user'的键：值对：{username：string，email：string}' - 这是我遇到第一个麻烦的地方......

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

我遇到的第二个主要问题与.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/

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

这是Fiddle。

Answer 3

JSON /字符串问题只是对JSON和JSON对象的一些实验/熟悉，但需要大量的解释来代替一些测试，因此我将重点关注问题的第2和第3部分。也许其他人比我更能说明第一部分。

AJAX代码块（1）使用值定义一些变量，（2）将它们传输到服务器端脚本进行处理，（3）从服务器接收响应。

＆＃34; old＆＃34;构造（我们现在使用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 on jQuery Promise Interface
jQuery 4 U
Daniel Demmel on Promises
José F. Romaniello

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

3 个答案: