SubmitFormData as Json (Update w/o 页面刷新

Question

我正在处理我的提交表单 w/o 页面刷新。下面是我的代码，它运行良好。如果我可以将数据以 Json 格式发送到我的 back.php 文件，那么我不需要在脚本部分声明所有变量，那会更容易。有没有办法从 json 中的表单发送数据并在我的 back.php 文件中对其进行解码？这会让我的生活更轻松。谢谢！

front.php

<script>
    function SubmitFormData() {
        var vorname = $("#vorname").val();
        var nachname = $("#nachname").val();
        $.post("back.php", {
                vorname: vorname,
                nachname: nachname
            },
            function(data) {
                $('#results').html(data);
                $('#myForm')[0].reset();
            });
    }
</script>

<form id="myForm" method="post">
    Name: <input name="vorname" id="vorname" type="text" /><br/>
    Name: <input name="nachname" id="nachname" type="text" /><br/>
    <input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
</form>

<div id="results">
    <!-- All data will display here  -->
</div>

back.php

// Here some Json decode?

// get values form input text and number
$vorname = $_POST['vorname'];
$nachname = $_POST['nachname'];

// Update SQL table with prepared statement
$query =   "UPDATE users  
                SET vorname = :vorname, nachname = :nachname  
                WHERE id = :user_id";
$pdoResult = $pdo->prepare($query);
$pdoExec = $pdoResult->execute(array(":vorname" => $vorname, ":nachname" => $nachname, ':user_id' => 2));
if ($pdoExec) {
    $success_msg = "Erfolgreich!";
} else {
}

Answer 1

这应该适合你：

与 JQuery 你可以使用 $("#idOfYourForm").serialize() 到表格;

.serialize() 方法以标准 URL-encoded 表示法创建文本字符串。

因此在您的脚本中，您将执行如下操作：

function SubmitFormData() {

   //in your case your form id its #myForm
   var formValues = $("#myForm").serialize();
   $.post("back.php", formValues,
        function(data) {
             $('#results').html(data);
             $('#myForm')[0].reset();
        }
   );
}

SubmitFormData as Json (Update w/o 页面刷新

SubmitFormData as Json (Update w/o page refresh

forms

ajax

json

submit