如何使用ajax代码加载html页面

时间:2014-08-23 08:32:20

标签: php jquery html ajax

我使用以下代码加载表单,如下面的代码

如下面的Ajax代码

function assessment_form() {
    $this = $(this);
    $.ajax({
        url: 'view/assessment/assessment_form.php',
        datatype: 'html',
        success: function (data) {
            $box = $('.span12');
            $box.after(data);
            $box.remove();
        }
    });
}
$(document).on('click', '#assessment_form', $(this), assessment_form);

和目录视图/ assessment / assessment_form.php中的表单页面如下所示 添加新用户

<div class="box span12">
    <div class="box-header well" data-original-title>
            <h2> Add New User</h2>
    </div>
    <div class="box-content">
        <form class="form-horizontal" id="user_form_data" enctype="multipart/form-data">
            <fieldset>
                <div class="control-group">
                    <label class="control-label" for="firstname">ROTC NO</label>
                    <div class="controls">
                        <input class="input-xlarge focused" id="rotc_no" name="rotc_no" type="text" />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="lastname">Password</label>
                    <div class="controls">
                        <input class="input-xlarge focused" id="password" name="password" type="text" />
                    </div>
                </div>

2 个答案:

答案 0 :(得分:0)

简单地说,您可以使用jquery的 load()函数将html页面加载到div中。 试试这个:

$('#yourDiv').load('pages/page1.html');

答案 1 :(得分:0)

使用此$(document).on('click','#assessment_form', assessment_form);

而不是$(document).on('click','#assessment_form',$(this),assessment_form);

查看更多信息$.get()

// Make it little more flexible and easy
function assessment_form() {

    $.get('your_url', function(data){
        $box = $('.span12');
        $box.after(data);
        $box.remove();
    });
}