php - 使用ajax将php文件加载到div中

Question

我已经被一个项目困住了几天，而我需要做的部分却迷失了。

我正在尝试获取一个 .php 文件，其中仅包含一个使用 AJAX 加载到 div 中的表单。我一直在研究所有旧帖子，但我尝试过的所有内容都不起作用，而且这些示例在某些方面让我更加困惑。我正在使用 XAMPP，并且拥有它，因此用户必须通过数据库登录并访问他们的个人资料。当他们在个人资料中时，他们可以单击“添加待办事项”，它应该会显示一个位于 toDoForm.php 中的表单。

profile.php

<div class="col s4">
    <button id="loadToDoForm" type="submit">Add a To-Do</button>
</div>
<div id="toDoFormShow">
    // toDoForm.php goes here on button click
</div>

toDoForm.php

<form class="col s12">
    <div class="row">
        <div class="input-field col s6">
            <input placeholder="Placeholder" id="first_name" type="text" class="validate">
            <label for="first_name">First Name</label>
        </div>
        <div class="input-field col s6">
            <input id="last_name" type="text" class="validate">
            <label for="last_name">Last Name</label>
        </div>
    </div>
</form>

这是我尝试在按钮单击上运行 ajax

script.js

$(document).ready(function(){

    $('#loadToDoForm').click(function(){
        $.ajax({
            type: "POST",
            url: "toDoForm.php",
            // url: "views/toDoForm.php",
            data: datas,
            cache: false,
            success: function(html){
            }
        });
    });

});

Answer 1

既然您正在使用 jQuery 解决方案，那怎么样？为此，您实际上并不需要服务器端。

您可以将其用于网站的许多不同部分。

创建一个名为例如的文件siteTemplates.html - 这将保存模板部分，例如您的表格

添加您的表单 html 并为其指定一个 ID:

<form class="col s12" id="myFormTemplate"><!-- notice ID -->
    <div class="row">
        <div class="input-field col s6">
            <input placeholder="Placeholder" id="first_name" type="text" class="validate">
            <label for="first_name">First Name</label>
        </div>
        <div class="input-field col s6">
            <input id="last_name" type="text" class="validate">
            <label for="last_name">Last Name</label>
        </div>
    </div>
</form>

加载模板的函数

loadTemplate(containerID, templateID){
    var myContainer = $('#' + containerID); // cache the container
    /* load just the section you need by specifying id within templates file */
    myContainer.load('/siteTemplates.html #' + templateID);
}

然后在点击时调用该函数

$('#loadToDoForm').click(loadTemplate('toDoFormShow', 'myFormTemplate'))

这尚未经过测试，但应该为您提供一个起点