jQuery Ajax POST标签/值对 [英] Jquery ajax POST label/value pair

查看:106
本文介绍了jQuery Ajax POST标签/值对的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在Ajax .POST中传递标签/值对,但是找不到任何解决方案. Ajax .POST通常会发送ID/值对,但我无法更改ID,而是要发送标签/值对.我提供了部分表格.请帮忙.

        $.ajax({
            url:"allfields.php",
            type:"POST",
    //      dataType:"json",
            data: $("#frmRequest").serialize(),
            success: function(msg){
                alert("Form Submitted: "+ msg);
                return msg;

              },
             error: function() {
            alert('Error occured');
             }
        });

<body>
     <form id="frmRequest" name="frmRequest" >

                <div class="clearfix" id="idRequestDetails"  >
                    <table width="809" border="0" id="tbl_data_1_1_1_1__" summary="Profile">
                      <tr>
                        <th width="156" scope="col"><label class="labelrequest" for="txtProfileName1__">Name</label>
                        </th>
                        <th width="74" scope="col"><label class="labelrequest" for="txtProfileUserID1__">User ID</label></th>
                        <th width="131" scope="col"><label class="labelrequest" for="txtSiteCost1__">Site Cost Centre</label></th>
                         <th width="182" scope="col"><label class="labelrequest" for="txtDetail1__">Additional Details</label></th>
                      </tr>
                      <tr>
                        <td><input type="text" name="txtProfileName1__" id="txtProfileName1__" tabindex="100" /></td>
                        <td><input name="txtProfileUserID1__" type="text" class="clearfix" id="txtProfileUserID1__" tabindex="110" size="8" /></td>
                        <td><input name="txtSiteCost1__" type="text" id="txtSiteCost1__" tabindex="220" size="8" /></td>

                        <td><textarea name="txtDetail1__" rows="1" id="txtDetail1__" tabindex="240"></textarea></td>
                      </tr>
                    </table>
                  </div>
        </body>

解决方案

以下是示例:

HTML

<form>
    <label>Label1</label><input type="text" value="1">
    <label>Label2</label><input type="text" value="some">
</form>

jQuery

var dataToServer = [];
$('form label').each(function() {
    dataToServer.push({
        label: $(this).text(),
        value: $(this).next().val()        
    });
});

console.log(data);
// output
// [ {label: 'Label1', value: '1'}, {label: 'Label2', value: 'some'}]

工作示例 .. >

希望这可以为您提供一些指导.

根据commnet

AJAX部分

$.ajax({
    url: "allfields.php",
    type: "POST",
    dataType:"json",
    data: dataToServer,   // send above data here
    success: function(msg) {
        alert("Form Submitted: " + msg);
        return msg;
    },
    error: function() {
        alert('Error occured');
    }
});

最终射击

$('#submit').on('click', function() {
    var dataToServer = [];
    $('#frmRequest label').each(function(i, el) {
        var temp= {},
            label = $(this).text(),
            value = $('#' + $(this).attr('for')).val();
        temp[label] = value;
        dataToServer.push(temp);
    });
    console.log(dataToServer);
});

查看控制台输出

I want to pass label/value pair in Ajax .POST but cannot find any solution. Ajax .POST normally send id/value pair but I cannot change my id and would like to send labels/value pair instead. I have provided partial form. Any help please.

        $.ajax({
            url:"allfields.php",
            type:"POST",
    //      dataType:"json",
            data: $("#frmRequest").serialize(),
            success: function(msg){
                alert("Form Submitted: "+ msg);
                return msg;

              },
             error: function() {
            alert('Error occured');
             }
        });

<body>
     <form id="frmRequest" name="frmRequest" >

                <div class="clearfix" id="idRequestDetails"  >
                    <table width="809" border="0" id="tbl_data_1_1_1_1__" summary="Profile">
                      <tr>
                        <th width="156" scope="col"><label class="labelrequest" for="txtProfileName1__">Name</label>
                        </th>
                        <th width="74" scope="col"><label class="labelrequest" for="txtProfileUserID1__">User ID</label></th>
                        <th width="131" scope="col"><label class="labelrequest" for="txtSiteCost1__">Site Cost Centre</label></th>
                         <th width="182" scope="col"><label class="labelrequest" for="txtDetail1__">Additional Details</label></th>
                      </tr>
                      <tr>
                        <td><input type="text" name="txtProfileName1__" id="txtProfileName1__" tabindex="100" /></td>
                        <td><input name="txtProfileUserID1__" type="text" class="clearfix" id="txtProfileUserID1__" tabindex="110" size="8" /></td>
                        <td><input name="txtSiteCost1__" type="text" id="txtSiteCost1__" tabindex="220" size="8" /></td>

                        <td><textarea name="txtDetail1__" rows="1" id="txtDetail1__" tabindex="240"></textarea></td>
                      </tr>
                    </table>
                  </div>
        </body>

解决方案

Here is an example:

HTML

<form>
    <label>Label1</label><input type="text" value="1">
    <label>Label2</label><input type="text" value="some">
</form>

jQuery

var dataToServer = [];
$('form label').each(function() {
    dataToServer.push({
        label: $(this).text(),
        value: $(this).next().val()        
    });
});

console.log(data);
// output
// [ {label: 'Label1', value: '1'}, {label: 'Label2', value: 'some'}]

Working Example.

Hope this can give you some guideline.

According to commnet

AJAX part

$.ajax({
    url: "allfields.php",
    type: "POST",
    dataType:"json",
    data: dataToServer,   // send above data here
    success: function(msg) {
        alert("Form Submitted: " + msg);
        return msg;
    },
    error: function() {
        alert('Error occured');
    }
});

Final shot

$('#submit').on('click', function() {
    var dataToServer = [];
    $('#frmRequest label').each(function(i, el) {
        var temp= {},
            label = $(this).text(),
            value = $('#' + $(this).attr('for')).val();
        temp[label] = value;
        dataToServer.push(temp);
    });
    console.log(dataToServer);
});

See the console output

这篇关于jQuery Ajax POST标签/值对的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆