使用ajax将数据发送到php页面并获取响应并在字段中显示

I've the following form which I want to post to page.php and want to get result calculted on page.php and want to show that data in the table boxes using AJAX or JQUERY, is this possible? If yes so let me know please. I don't want to refresh the page as I want to be filled all data on single page and want to display all results on that page(IN table cells as user input data in one table and it will update its response).

我有以下表格，我想发布到page.php，并希望在page.php上获得结果，并希望使用AJAX或JQUERY在表格框中显示该数据，这可能吗？如果是，请告诉我。我不想刷新页面，因为我希望在单页上填充所有数据，并希望在该页面上显示所有结果（IN表格单元格作为一个表中的用户输入数据，它将更新其响应）。

<form method = "post" action = "page.php">
    <input type = "text" name = "fld1" id = "fld1" />
    <input type = "text" name = "result1" id = "result1" value = "value_from_php_page" disabled />
    ...
</form>

1 个解决方案

#1

Yes it is possible. Take a look at this example.

对的，这是可能的。看看这个例子。

On your page.php

在你的page.php上

<?php
    echo $_POST["fld1"];
?>

On your myForm.html. event.preventDefault() is needed, otherwise submit will perform at default and page will be reload.

在你的myForm.html上。需要event.preventDefault（），否则提交将默认执行，页面将重新加载。

<script>
$(function(){
    $("#submit").click(function(event){ 
        event.preventDefault();
        $.ajax({
            type:"post",
            url:"page.php"
            data:$("#form").serialize(),
            success:function(response){
                alert(response);
            }
        });
    });
});
</script>
<form id="form" method = "post" action = "page.php">
    <input type = "text" name = "fld1" id = "fld1" />
    <input type = "text" name = "result1" id = "result1" value = "value_from_php_page" disabled />
    <input type="submit" value="Submit" id="submit">
</form>

#1