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

I have two files. One file is named index.php and another file is named process.php.

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

I have a form that submits to process.php in index.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>

I also have a process in process.php to echo some data based off of the input. How would I be able to use AJAX to submit the form without leaving the page?

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

Is it something like:

是这样的:

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

What page would I put the above code on if it was right? Also, how do I change the above code to say what the process.php outputted? For example, if I echo "Hello" on process.php, how do I make it say it in the done div?

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

I have seen many responses regarding AJAX, but they all rely on data that is pre-made like APIs. I need to do a database query and fetch the data dependent on the address entered and print the data out.

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

2 个解决方案

#1

You need to collect the data in the form so that you can submit them to the process page, and you need to run your code when submitting the form (and cancel the default form submission)

您需要收集表单中的数据,以便将它们提交到流程页面,并且需要在提交表单时运行代码(并取消默认表单提交)

$('#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;
});

[update]

If you want to modify the data before submitting them, you will have to manually create the parameters to pass to the ajax

如果要在提交数据之前修改数据,则必须手动创建要传递给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;
});

#2

You could use the jQuery form plugin: http://jquery.malsup.com/form/

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

Let me know if you want example code.

如果您想要示例代码,请告诉我。

#1