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

Posted 2023-05-09

【中文标题】在 JavaScript 中使用 ajax 提交和显示表单数据

【英文标题】：Using ajax to submit and display form data in JavaScript

【发布时间】：2013-10-01 11:39:16

【问题描述】：

我的任务是根据这些要求使用我的 html/CSS/javascript/jQuery 技能来解决代码块：

要求： - 通过 add_user 函数使用 ajax 提交用户输入的数据。 - 您可以假设服务将以 200 状态响应。 - 当添加用户服务响应值为 false 的成功属性时，在表单顶部显示红色错误。使用错误属性作为消息。 - 当响应返回成功属性时，在用户列表中显示新用户 - 当用户输入无效的电子邮件地址时，突出显示电子邮件输入。此外，以红色显示“请输入有效的电子邮件地址”文本。 注意：该服务将不提供此验证功能，并将接受无效的电子邮件。

//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' - 这是我遇到的第一个问题...

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

我遇到的第二个主要问题与 .ajax() 方法的 jQuery 调用有关。我对 AJAX 的运作方式有一个非常基本的了解，但是这里使用的语法让我感到困惑。我知道数据：json:response 正在使用 type:'post' 发送到 url:'/echo/json/'，但我不明白在这发生后如何检索该数据。我也不明白在那个过程中“响应”的价值是什么。

最后，我不明白 $.ajax() 语句末尾的回调函数的使用，以及它与作为单击表单按钮输入的结果的 addUser() 函数的初始调用有何关系.我不明白它的用途，也不明白它在语法上的使用方式。

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

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

//EDIT// jsfiddle 工作流程的更新链接，具有正确的 jQuery 选择器和用于显示错误消息/用户输入的附加功能：http://jsfiddle.net/brianjsullivan/5vv5w/

【问题讨论】：

您可能想查看This 和This。

【参考方案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));
        );
    );    
);

【讨论】：

当然，我以前使用过核心 JS 来处理这个项目，最近才实现 jQuery，我忘记了那个特殊的语法怪癖。感谢您指出这一点，看到一些进展令人耳目一新！

【参考方案2】：

JSON/字符串问题是关于 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 on jQuery Promise InterfacejQuery 4 UDaniel Demmel on PromisesJosé F. Romaniello

【讨论】：

感谢您对这个过程如此详细的解释！我仍在审查您提供的信息，因为我还没有完全掌握这个概念，但这是我理解的一大步。供您参考，这里是我在项目中工作的更新 jsfiddle 的链接。在您和其他人的帮助下，我能够为项目制定满足所有要求的解决方案。 Here is the link

【参考方案3】：

将代码更改为

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

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

这里是Fiddle。

【讨论】：

你的小提琴 dont work...you forget the #` (id) in username 和 email

谢谢，我忘了指出我正在使用“#”符号基于这些 HTML 元素的 ID 创建一个 jQuery 对象。

我无法完全理解的事情与 addUser() 调用中提供的回调函数有关。如果 'response' 是一个在 addUser() 开始运行之前甚至没有声明的变量，那么在这种情况下它怎么可能作为参数发送呢？我没有看到变量“响应”在此代码的进程中具有任何意义。

在 JQuery ajax 中，有一个 success 回调来处理来自服务器的 response，例如success: function(responseData)。在你的例子中，你可以注意到在 AJAX 方法中有一个代码 sn -p success: callback，其中 callback 是一个以response为参数的函数，由你提供给addUser。所以，每当AJAX从服务器返回成功响应时，就会执行这个回调函数。这样做有意义吗？