Javascript 如何使用ajax从表单传递动态内容_Javascript_Jquery_Html_Ajax

Javascript 如何使用ajax从表单传递动态内容

javascript jquery html ajax

Javascript 如何使用ajax从表单传递动态内容,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我需要传递表单中填写的数据，以便使用Ajax代码在POST请求中发送这是我的HTML表单： <!DOCTYPE html> <html> <head> <title>Alteon Cluster Management</title> <script src="jquery-1.11.2.min.js"></script> <script src="a

我需要传递表单中填写的数据，以便使用Ajax代码在POST请求中发送

这是我的HTML表单：

<!DOCTYPE html>
<html>
    <head>
        <title>Alteon Cluster Management</title>
        <script src="jquery-1.11.2.min.js"></script>
        <script src="alteon1.js"></script>  

    </head>
    <body>
    <button id="configR1btn">Configure Server 1</button> <button id="configR2btn">Configure Server 2</button>
        <form>
                <section>
                    <header>
                    <h1>R Servers</h1>
                </header>
                    Server 1 IP Address:    <input type ="text" name="firstRServerIP"><br><br>
                    Server 1 Name:          <input type ="text" name="firstRServerName"><br><br>

                    Server 2 IP Address:    <input type ="text" name="secondRServerIP"><br><br>
                    Server 2 Name:          <input type ="text" name="secondRServerName"><br><br>
                </section>

        </form>
    </body>
</html>

例如，我在HTML表单的“firstRServerIP”部分填写数据“1.2.3.4”，然后单击“配置”按钮。请求后数据应如下所示：

{
"State":"2"
"IpAddr":"1.2.3.4"
}

相反，我得到：

{
"State":"2"
"IpAddr":   "  firstRServerIP"
}

我的代码有什么问题？我们将不胜感激

谢谢。

您可以这样更正它：

var dataString = '{\n"State":"2"\n"IpAddr":"' + firstRServerIP + '"\n}';

但我建议你这样做：

var dataString = JSON.stringify({
        State: '2'
        IpAddr: t.prev(".firstRServerIP").val()
    })
;

如果需要表单的所有值，还可以执行以下操作：

var dataString = $('#my-form').serialize();

在这种情况下，在输入中设置好的

名称

属性（即

状态

和

IpAddr

），并使用


我更改了数据字符串
对象的格式，使其更具可读性，还使用了不同的jQuery选择器从适当的输入字段获取值
$('#configR1btn').click(function () {
        var firstRServerIP = $("[name='firstRServerIP']").val();
        var dataString = {
            "State":"2",
            "IpAddr": firstRServerIP
        };
        console.log(dataString);

这将输出：

你可以玩这个。打开控制台查看单击的结果。
以下是您需要的。请记住，您没有带有class=“firstRServerIP”
的元素；因此，$（'.firstRServerIP'）.val（）将始终返回未定义的
$('#configR1btn').click(function (){
     var f = $('form').first(),
         firstRServerIP = f.find(':text[name=firstRServerIP]').val(),
         dataString = JSON.stringify({ 
             State: "2", 
             IpAddr: firstRServerIP 
     });
     dataString = dataString.replace(/([\{,])/g,'$1\n').replace('}','\n}');
     $.ajax(...........

概念验证

$（'configR1btn'）。在（'click'，function（）上{
var f=$（'form'）.first（），
firstRServerIP=f.find（':text[name=firstRServerIP]'）。val（），
dataString=JSON.stringify（{
国家：“2”，
IpAddr:firstRServerIP
});
dataString=dataString.replace（/（[\{，]）/g，'$1\n'）。replace（'}'，'\n}'）；
警报（数据串）；
//在这里打电话
});

配置服务器1配置服务器2
R服务器
服务器1 IP地址：


服务器1名称：


服务器2 IP地址：


服务器2名称：


这样做->var-dataString={State:2，IpAddr:firstRServerIP}您应该序列化表单数据，而不是像这样尝试使用var dataString='{\n“State”：“2”\n“IpAddr”：“'+firstRServerIP+”\n}”手动构建表单数据；但是我得到：{“State”：“2”“IpAddr”：“undefined”}：有什么想法吗？抱歉，在完成之前收到了我的评论。。。这篇文章是用以下数据发送的：{“State”：“2”“IpAddr”：“undefined”}：有什么想法吗？使用var firstRServerIP=t.nestest（'form'）。查找（'.firstRServerIP'）.val（）
，然后在输入中添加一个类
，并在表单内部设置按钮。
（不像在示例中那样在外部）。添加了该类，但仍然得到“undefined”：{“State”：“2”“IpAddr”：“undefined”}：我在表单中有一个按钮，但是当我这样做时，会发送一个GET请求而不是POST。我稍后会解决这个问题，现在我更感兴趣的是将表单中填写的数据传递给POST请求。谢谢。这不是t.resest（'.form'）
而是t.resest（'form'））。差不多了！现在，我填写了数据“1.1.1.1”，发送的帖子没有引号，也没有“{”和“}”“开头和结尾的字符：State:2 IpAddr:1.1.1有什么想法吗？在哪里可以看到没有字符的代码？”？我确信括号确实在那里，JSON对象的格式根据JSFIDLE上的示例是正确的。因此，实际的POST请求数据包是这样发送的：State:2 IpAddr:1.1.1.1I更新了我的答案，以显示我的Chrome控制台中的输出是什么样子。奇怪。我刚把你的代码加入我的。。。你能分享你的完整代码吗？有了这个代码，帖子看起来像这样：{“State”：2}：现在看起来像这样：{“State”：“2”}：是的，“IpAddr”：“1.1.1.1”不包括在内，在“{”和“State”…以及“2”和“}”之间没有新行，但应该有新行。我不知道为什么会发生这种情况，但我已经更新了我的答案。
$('#configR1btn').click(function (){
     var f = $('form').first(),
         firstRServerIP = f.find(':text[name=firstRServerIP]').val(),
         dataString = JSON.stringify({ 
             State: "2", 
             IpAddr: firstRServerIP 
     });
     dataString = dataString.replace(/([\{,])/g,'$1\n').replace('}','\n}');
     $.ajax(...........