Question

我有两个文件。一个文件名为index.php，另一个文件名为process.php。

我有一个提交到index.php中的process.php的表单：

<form class="form" action="process.php" method="POST" name="checkaddress" id="checkaddress">
 <table>
     <tr class="element">
          <td><label>Address</label></td>
          <td class="input"><input type="text" name="address" /></td>
     </tr>
 </table>


 <input type="submit" id="submit" value="Submit"/>


 </form>
 <div class="done"></div>

我还在process.php中有一个进程来根据输入回显一些数据。如何在不离开页面的情况下使用AJAX提交表单？

是这样的：

$.ajax({
        url: "process.php", 
        type: "GET",
        data: data,     
        cache: false,
        success: function (html) {
            $('.done').fadeIn('slow');
        }
 });

如果它是正确的，我会将上面的代码放在哪个页面上？另外，如何更改上面的代码来说明process.php输出的内容？例如，如果我在process.php上回显“Hello”，我如何让它在done div中说出来？

我见过很多关于AJAX的回复，但它们都依赖于像API这样的预制数据。我需要进行数据库查询并根据输入的地址获取数据并打印出数据。

Answer 1

您需要收集表单中的数据，以便将其提交到流程页面，并且在提交表单时需要运行代码（并取消默认表单提交）< / p>

$('#checkaddress').on('submit', function(e){
    // get formdata in a variable that is passed to the ajax request
    var dataToPassToAjax = $(this).serialize();

    $.ajax({
        url: "process.php", 
        type: "GET",
        data: dataToPassToAjax,     
        cache: false,
        success: function (resultHtml) {
            // add the returned data to the .done element
            $('.done').html( resultHtml ).fadeIn('slow');
          }
    });

  // cancel the default form submit
  return false;
});

<强> [更新]

如果要在提交数据之前修改数据，则必须手动创建要传递给ajax的参数

$('#checkaddress').on('submit', function(e){
    // get formdata in a variable that is passed to the ajax request
    var dataToPassToAjax = {};
    var address = $('input[name="address"]', this).val();

    // alter address here
    address = 'something else';

    dataToPassToAjax.address = address;

    $.ajax({
        url: "process.php", 
        type: "GET",
        data: dataToPassToAjax,     
        cache: false,
        success: function (resultHtml ) {
            // add the returned data to the .done element
            $('.done').html(resultHtml ).fadeIn('slow');
          }
    });

  // cancel the default form submit
  return false;
});

Answer 2

您可以使用jQuery表单插件：http://jquery.malsup.com/form/

如果您需要示例代码，请告诉我。

如何使用AJAX打印div内的数据？

2 个答案: