Question

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

我试图获取一个.php文件，其中只包含一个使用AJAX加载到div中的表单。我一直在研究所有旧帖子，我尝试过的所有内容都不起作用，这些例子让我在某些方面更加困惑。我正在使用XAMPP，因此用户必须通过数据库登录才能访问他们的个人资料。当他们在个人资料中时，他们可以点击＆＃34;添加待办事项＆＃34;它应该提出一个位于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解决方案怎么样？你真的不需要服务器端。

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

创建一个名为eg的文件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'))

这是未经测试但应该给你一个起始块

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

1 个答案: