Question

我有这个表单和结果div：

<form action="result.php">

<input type="checkbox" name="number[]" value="11" />
<input type="checkbox" name="number[]" value="12" />
<input type="checkbox" name="number[]" value="13" />
<input type="checkbox" name="number[]" value="14" />
<input type="checkbox" name="number[]" value="15" />
<input id="submit" type="submit" name="submit" value="show result" />
</form>

<div id="result"></div>

现在我希望点击result.php中div的提交显示id="result" {/ 1}}

我该如何使用ajax？

Answer 1

 $(form).submit(function(e)
 {
     var postData = $(this).serializeArray();
     var formURL = $(this).attr("action");
     $.ajax(
     {
         url : formURL,
         type: "POST",
         data : postData,
         success:function(data, textStatus, jqXHR) 
         {
             $("#result").html(data);
         },
         error: function(jqXHR, textStatus, errorThrown) 
         {
              console.log('error');      
         }
     });
     e.preventDefault(); 
     e.unbind(); 
});

试试这个

Answer 2

在表单上添加id属性，然后使用如下所示的ajax：

$('#form-id').on('submit', function(e) {
   e.preventDefault();
   var data = $('#form-id').serialize();

   $.ajax({
      type:    'POST',
      url:     'result.php',
      data:    data,
      success: function(data) {
         $('#result').html(data);
      }
   });

});

Answer 3

您可以使用javascript。您可以循环输入以收集ajax调用的数据。如果ajax返回成功的答案，则使用ajax响应更改div＃results内容。

Answer 4

<form action="javascript:;">

像这样替换表格标签

$('#submit').submit(function(){
 formData = $('form').serialize();   
 $.ajax({ url:'result.php',
    dataType:'text',
    data:formData,

    success:function(data){
      $('#result').html(data);
    }
    });
});

如何使用刷新页面提交表单和显示结果

4 个答案: