如何在jquery中使用带有serializeArray的onchange?

时间:2014-03-26 13:36:59

标签: php jquery ajax

我创建了一个包含3个选择部分的表单,我尝试使用serializeArray创建一个数组。我想用jquery ajax将这个数组发布到我的php文件中。但我不想使用提交。当我只有一个选择标签时,我使用了这段代码

<form>
<select onchange="myfunction(str)">
        <option value="">num</option>
        <option value="123">123</option>
        <option value="133">133</option>
</select>
</form>

在我的ajax代码中,我使用open("GET","myphpfile.php?q="+str,true)send()而没有jquery。但现在我有3个选择标记,我不知道如何使用serializeArray()(或serialize())与jquery。 这是我的新表格

<form>
    <select name="num1">
        <option value="">num1</option>
        <option value="12">12</option>
        <option value="13">13</option>
    </select>
    <select name="num2">
        <option value="">num2</option>
        <option value="123">123</option>
        <option value="133">133</option>
    </select>
    <select name="num3">
         <option value="">num3</option>
         <option value="12345">12345</option>
         <option value="12346">12346</option>
     </select>
</form>

我的问题的第二部分是如何编写我的PHP代码来回显我的数组。我认为它应该是这样的

<?php
$myarr = array();
$myarr = $_GET["str"]//or $_POST['str']
echo $myarr[0];    
?>

非常感谢!顺便说一句,英语不是我的母语;请原谅输入错误。

2 个答案:

答案 0 :(得分:0)

使用

var arrayForm = $('form select').serializeArray();

然后

var paramForm = $.param(arrayForm);

喜欢http://jsfiddle.net/LBKeQ/

然后你可以使用

$.ajax({
    type: 'POST',
    async:true,
    cache: false,
    data: paramForm,
    success:function (data, textStatus) {
        console.log(data);
    },
    url:"myphpfile.php"
});

答案 1 :(得分:0)

好的,如果我正确地回答你的问题,这就是你要做的事情:

在动态添加的字段上挂钩事件

$("form").on("change", "select", function() {
  var name = $(this).prop("name");

  console.log("Select-Name: " + name);
  // if you use the plugin I mentioned further down and you'll need to serialize
  // all fields already here, you can use the plugin's .fieldSerialize method
})

在此处获取详细信息:https://api.jquery.com/on/

序列化表单

最简单的方法是使用这个jQuery Form-Plugin: http://malsup.com/jquery/form/

创建一个json-dataset几乎没有这样的努力:

$("form").ajaxForm({ 
        dataType: "json", 
        success: function(data) { sendToServer(data); }
    }); 

使用后端数据

该插件还允许您使用您提供的脚本在服务器上工作($ _POST [&#34; value&#34;])