AJAX没有重新加载页面 - AJAX is not reloading the Page

AJAX is not reloading the Page

本文关键字：加载新加载 AJAX | 更新日期: 2023-09-27

我的任务是使用JavaScript和JSON返回并在浏览器上显示数据。我是非常新的AJAX，我有麻烦得到AJAX的按钮点击。主要问题是如何激活AJAX。

每次用户输入新数据时，我都试图在同一屏幕上加载数据。

PHP代码:

<h2>Submit Recipes</h2>
<form id="addRecipes" name="addRecipes" action="Welcome.php"method="POST">
    <fieldset>
        <legend>Submit Recipes</legend>
        <textarea id="recipesId" name="recipes" rows="6" cols="70"></textarea>
        <br/>
        <input type="button" value="Submit" name="submit" onclick="submitRecipes()"/>
    </fieldset>
</form>
<br/>
<table id="recipesTbl" border="1" >
    <tr>
        <th class="row-datetime" name="datetime">DateTime </th>
        <th class ="row-recipes" name="recipes">  Recipes </th>
    </tr>
</table>

Ajax代码:

function submitRecipes() {
    var recipes = document.getElementById("recipesId").value;   
    if (recipes == null || recipes == "") {
        alert("Please enter the recipes");
        return false;
    }
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
             var text = request.responseText;
             var json = JSON.parse(text);
            var table = document.getElementById("recipesTbl");
            var newRow = table.insertRow(1);
            var newCell = newRow.insertCell(0);
            newCell.innerHTML = json.datetime;
            newCell = newRow.insertCell(1);
            newCell.innerHTML = json.recipes;
        }
    }
    request.open("POST", "SubmitRecipes.php", true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    
    request.send("recipes=" + recipes);
    document.getElementById("recipesId").value = "";
}

PHP文件片段:

<?php
$recipes= $_POST["recipes"];
date_default_timezone_get('UTC');
$datetime = date("Y-m-d H:i:s");
storeRecipes($recipes, $datetime);
echo ('{ "datetime" : "'. $datetime. '",'.
        '"recipes": "'.recipes .'"}');
?>

函数storeRecipes不存在。为了使JSON.parse工作，单引号(')必须在外面，双引号(")必须在里面。

例如:

var string = '{"a": "1", "b": "2"}';
var res = JSON.parse(string);
console.log(res);

<?php
$recipes = $_POST["recipes"];
date_default_timezone_get('UTC');
$datetime = date("Y-m-d H:i:s");
// storeRecipes($recipes, $datetime);
$data = '{"datetime": ' . '"' . $datetime . '",';
$data .= '"recipes": ' . '"' . $recipes . '"}';
echo $data;
?>

(和脚本文件在<head>部分)，它应该工作!