将数据作为javascript数组发送

Question

HTML

<li id="li-tip-line">
   <table>
        <tbody><tr>
           <td>
            <label for="lblTipLine" data-petkey="dog">Dog Tip Line Amount :</label></td>
             <td>
            <input type="text" name="tip-line-amount" id="tip-line-amount" value="0.00" class="cls-tip-line-amount"></td>
           </tr>
           <tr>
           <td>
            <label for="lblTipLine" data-petkey="bruiser">Bruiser Tip Line Amount :</label></td>
            <td>
         <input type="text" name="tip-line-amount" class="tip-line-amount" value="0.00" class="cls-tip-line-amount"></td>
          </tr>
        </tbody></table>
 </li>

UI

我的问题

当用户点击“付费”按钮时，需要将“data-petkey”值和“tip-line-amount”作为数组发送？我怎么能这样做？

Answer 1

使用.map（）

var arrData = $('[data-petkey],.tip-line-amount').map(function(){
      return ($(this).hasClass('tip-line-amount')?this.value:$(this).data('petkey'));
}).get();
//returns ["dog", "0.00", "bruiser", "0.00"] 

DEMO

---

如果您想要2个独立的阵列，请执行此操作

如果您想要JSON对象var arrDataKey = $('[data-petkey]').map(function(){ return $(this).data('petkey'); }).get(); var arrLine = $('.tip-line-amount').map(function(){ return this.value; }).get(); ，请使用.each（）

{bruiser:"0.00",dog:"0.00"}

DEMO

Answer 2

安东的回答太棒了。但也许你真正想做的是通过ajax发送帖子请求。 假设你形成这样：

<form method="post" action="paid.aspx" id="payform">
<li id="li-tip-line">
    <table>
        <tbody><tr>
        <td>
        <label for="lblTipLine" data-petkey="dog">Dog Tip Line Amount :</label></td>
        <td>
        <input type="text" name="tip-line-amount" id="tip-line-amount" value="0.00" class="cls-tip-line-amount"></td>
        </tr>
        <tr>
        <td>
        <label for="lblTipLine" data-petkey="bruiser">Bruiser Tip Line Amount :</label></td>
        <td>
        <input type="text" name="tip-line-amount" class="tip-line-amount" value="0.00" class="cls-tip-line-amount"></td>
        </tr>
        </tbody>
    </table>
</li>
</form>

并使用此脚本

<script>
    $( document ).ready(function() {
        $("#payform").submit(function(e){
            e.preventDefault();
            $.post($("#payform").attr('action'),$("#payform").serialize())
                .done(function(data) {
                    // handle the result from the server
                    alert(data);
                });
        });
    });
</script>