Question

我需要传递填写在表单中的数据，因此它将使用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>

这是我的Ajax代码：

$(document).ready(function(){

                $('#configR1btn').click(function (){
                    var t = $(this);
                    //var t.closest(".form").find(".firstRServerIP").val();
                    var firstRServerIP = t.prev(".firstRServerIP").val();
                    var dataString = '{\n"State":"2"\n"IpAddr":" + firstRServerIP"\n}';

                        $.ajax({
                                        method: 'POST',
                                        url: 'https://Default_Generated_Alteon_BBI_Cert/config/SlbNewCfgEnhRealServerTable/R1',
                                        //crossDomain: true,
                                        data: dataString,
                                        dataType: 'json',
                                        success: function(responseData, textStatus, jqXHR) {
                                                var value = responseData.someKey;
                                                },
                                        error: function (responseData, textStatus, errorThrown) {
                                                alert('POST failed.');
                                                }
                                });

                        });
});

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

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

相反，我得到：

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

我的代码出了什么问题？我们将不胜感激。

感谢。

Answer 1

你可以这样纠正：

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

在这种情况下，在输入中设置好的name属性（即。State和IpAddr）并使用<form id="my-form">

Answer 2

我更改了dataString对象的格式，使其更具可读性，并使用不同的jQuery选择器从正确的输入字段中获取值。

$('#configR1btn').click(function () {
        var firstRServerIP = $("[name='firstRServerIP']").val();
        var dataString = {
            "State":"2",
            "IpAddr": firstRServerIP
        };
        console.log(dataString);

这将输出：

enter image description here

您可以使用此JSFiddle。打开控制台以查看单击结果。

Answer 3

这是你需要的。请记住，您没有class="firstRServerIP"的元素;因此$('.firstRServerIP').val()将始终返回undefined。

$('#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(...........

概念证明

＆＃13;

$('#configR1btn').on('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}');

  alert( dataString );
  //ajax call here
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

＆＃13;

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

3 个答案: