Question

我想改进我的网站并找到一个好方法，通过AJAX提交表单。但是，我有这么多形式，做$（'＃formx'）。submit（）是不切实际的。我想知道是否有办法通过制作通用标记来自动执行此操作;

<form class="ajax_form" meta-submit="ajax/pagename.php">
 <input type="text" name="inputx" value="x_value">
 <input type="text" name="inputy" value="y_value">
</form>

并将此提交给ajax / pagename.php，它自动包含inputx和inputy？这不仅可以节省很多时间，而且还可以编写很多代码。

第一个问题所以我希望它不是一个愚蠢的问题：）

Answer 1

您可以为文本框创建ajax，以便在更改焦点时可以更新到数据库。

<form id="ajax_form1">
<fieldset> 
    <input type="text" id="inputx" value="x_value" />
    <input type="text" id="inputy" value="y_value" /> 
</fieldset>
</form>

<script>

$(document).ready(function()
{
$("form#ajax_form1").find(":input").change(function()
 {
   var field_name=$(this).attr("id");
   var field_val=$(this).val();
   var params ={ param1:field_name, param2:field_val };

   $.ajax({ url: "ajax/pagename.php",
            dataType: "json",
            data: params,           
            success: setResult      
         });
});
});
</script>

Answer 2

这样的东西应适用于所有形式。 它使用jQuery - 这在您的项目中是否可用？这个特定的代码块没有经过测试，但我总是使用这种方法。是一个美好的节省时间。请注意，我已将meta-submit更改为data-submit，以便可以使用$('.elemenet_class').data('submit');

获取其值

<强> HTML

<!-- NOTE: All Form items must have a unique 'name' attribute -->
<form action="javascript:void(0);" class="ajax_form" data-submit="ajax/pagename.php">
    <input type="text" name="inputx" value="x_value">
    <input type="text" name="inputy" value="y_value">

    <input type="submit" value="go" />
</form>

<强>的JavaScript

$('.ajax_form').submit(function(e){
    var path = $(this).attr('data-submit'); //Path to Action
    var data = $(this).serialize();    //Form Data
    $.post(path, {data:data}, function(obj){

    });
    return false;
})

<强> PHP

//DEBUGGING CODE
//var_dump($_POST);
//die(null);

$data = $_POST['data'];
$inputx = $data['inputx'];
$inputy = $data['inputy'];

使用Jquery自动化AJAXed表单

2 个答案: