Question

作为HTML，JavaScript以及属于它的所有内容对我来说都是非常新的，我经常会遇到一些问题。

今天我的问题是我不知道如何让我的脚本发布（）我在输入字段中输入的内容。

我的HTML中有3个输入字段，当我按下按钮执行该功能时，它应该使用firstname，lastname和email并将其发送到数据库（mysql）。

简单地说，我的HTML看起来像这样：

    <form id="regForm">
        <div>
            <label for="firstname">Firstname</label>
            <input id="firstname" type="text" name="firstname"/>
        </div>
        <div>
            <label for="lastname">Lastname</label>
            <input id="lastname" type="text" name="lastname"/>
        </div>
        <div>
            <label for="email">Email</label>
            <input id="email" type="email" name="email"/>
        </div>
            <button id="regBtn" type="button">Click Me</button>
   </form>

现在到了棘手的位置:(我的脚本文件：

$(document).ready(function() {
    $("#regBtn").click(function() {
        $.post("example.ex/register")
        //I dont know what to do here// 
    });
});

我已经搜索并尝试了一些例子，但我做错了。这样的事情？

   //This is an example//
  $(document).ready(function() {
    $("#regBtn").click(function() {
        $.post("example.ex/register"),
        {
           firstname: "#firstname",
           lastname: "#lastname",
           email: "#email"
        }
    });
});

如何从输入中发送我的名字，姓氏和电子邮件作为参数？请帮我理解这是如何工作的。谢谢。

Answer 1

您需要从输入中获取值。

在您的javascript中，将"#firstname"替换为$('#firstname').val()

这假设您的名字输入的id为firstname

Answer 2

您应该尝试阅读文档API of jQuery。在这里，您可以看到如何使用jQuery进行POST调用，包括示例。这将对您有所帮助。

但我会给你一些代码，可以帮助你朝着正确的方向前进。

$(document).ready(function() {
    $("#regBtn").click(function() {
        $.post("example.ex/register", $('#regForm').serializeArray(), function(response) {

        });
    });
});

Answer 3

使用jQuery进行POST的标准方法如下例所示：

$.post( "PAGE_URL", { DATA_TO_BE_SENT_GOES_HERE } );

因此，在您的示例中，您需要制作如下代码：

$.post("example.ex/register",
        {
           firstname: $("#firstname").val(),
           lastname: $("#lastname").val(),
           email: $("#email").val()
        });

你的代码块问题在这里是一个错字：

$.post("example.ex/register"), {YOUR_DATA};

虽然正确的应该是这样的：

$.post("example.ex/register", {YOUR_DATA});

您只需在提供应与您的通话一起发送的数据之前关闭该功能。

要解决的另一个问题是，您最有可能希望在成功接收到成功完成操作的数据后通知用户，这是在调用$.post()时使用以下签名完成的：

$.post( "PAGE_URL", { name: "Test", time: "10AM" }, success: FUNCTION_TO_EXCUTE_ON_SUCCESS() );

所以回到你的代码，它应该是这样的：

$.post("example.ex/register",
        {
           firstname: $("#firstname").val(),
           lastname: $("#lastname").val(),
           email: $("#email").val()
        },success: function(){
alert("Action completed successfully") // please make a better UI decision than altering the user, this is just an example :)
    });

希望这会有所帮助。

无法让我的帖子（）使用jQuery Ajax工作

3 个答案: