在加载的文件

时间:2016-07-26 18:10:52

标签: php jquery html ajax

早上好。我试图在同一个文件中加载FORM POST的响应。

这是我的索引:

<div class="right-half">
    <div id="include">
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript"> 
        $("#search").click(function(){
            $("#include").load("admin_search.php"); 
        });
        $("#add").click(function(){
            $("#include").load("include/test.html"); 
        });
        $('#user').submit(function() { // catch the form's submit event
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(), // get the form data
                type: $(this).attr('POST'), // GET or POST
                url: $(this).attr('admin_user.php'), // the file to call
                success: function(response) { // on success..
                    $('#include').html(response); // update the DIV
                }
                });
            return false; // cancel original event to prevent form submitting
        });
</script> 

这是我的admin_search.php文件,如果它不明显,它会被我的索引文件中的jQuery加载:

<section>
<div>
    <header>
        <h2>Buscar información de usuario</h2>
    </header>

    <p>Para buscar un usuario o su información relacionada, ingresa el correo electrónico con el que el usuario se identifica.</p>

    <form id="user">
        <div class="row">
            <div>
                <input type="text" name="email" id="email" placeholder="Correo electrónico">
            </div>

            <div>
                <input type="submit" name="submit" value="Buscar usuario">
            </div>
        </div>
    </form>
</div>

理论上,我应该从我的#include DIV中获取admin_user.php的结果,但我什么都没得到。

有人可以给我一些建议吗?

编辑:这是我的admin_user.php文件

<?php

require_once('admin_connect.php');
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$query = $con->query("SELECT * FROM user_data WHERE email = '$email'");

echo("
<table cellspacing='0'>
    <thead>
        <tr>
            <th></th>
            <th>VALORES</th>
        </tr>
    </thead>");

while ($row = $query->fetch(PDO::FETCH_ASSOC)) {

echo("
    <tbody>
        <tr>
            <td>Nombre</td>
            <td>"); echo $row['name']; echo("</td>
        </tr><!-- Table Row -->
        <tr class='even'>
            <td>Correo electrónico</td>
            <td>"); echo $row['email']; echo("</td>
        </tr><!-- Darker Table Row -->
        <tr>
            <td>Edad</td>
            <td>"); echo $row['age']; echo("</td>
        </tr>
        <tr class='even'>
            <td>Sexo</td>
            <td>"); echo $row['gender']; echo("</td>
        </tr>
        <tr>
            <td>Peso:</td>
            <td>"); echo $row['weight']; echo("</td>
        </tr>
        <tr class='even'>
            <td>Estatura</td>
            <td>"); echo $row['height']; echo("</td>
        </tr>
        <tr>
            <td>Problemas de salud</td>
            <td>"); echo $row['health_problem']; echo("</td>
        </tr>
        <tr class='even'>
            <td>Actividad física</td>
            <td>"); echo $row['activity']; echo("</td>
        </tr>
        <tr>
            <td>Alergias</td>
            <td>"); echo $row['food_sick']; echo("</td>
        </tr>
        </tbody>
    </table>");
}
?>

修改

我设法通过移动这段代码来解决它:

<script type="text/javascript">
$('#user').submit(function(event) { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $('#user').serialize(), // get the form data
        type: 'POST', // GET or POST
        url: 'admin_user.php', // the file to call
        success: function(response) { // on success..
            $('#include').html(response); // update the DIV
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert(textStatus);
        }
    });
    event.preventDefault();
});
</script> 

...到我的admin_search.php文件。

然后,由于一些意外错误,我不得不将crossDomain: true,添加到我的ajax调用中,瞧!谢谢大家。

1 个答案:

答案 0 :(得分:0)

$.ajax函数中,type属性应如下所示:type: 'POST'。此外,url应该是这样的:url: 'admin_user.php'。还不确定ajax函数中的$(this)是否引用了您正在考虑的self,因此我会明确地将该行更改为:$('#user').serialize()

您还可以将error功能添加到ajax来电。

修改 您需要在加载表单后运行AJAX函数调用,因此在加载表单后,这将在$('#search').click方法中。

总之它看起来像这样:

$("#search").click(function(){
    $("#include").load("admin_search.php");
    $('#user').submit(function() { // catch the form's submit event
        $.ajax({ // create an AJAX call...
            data: $('#user').serialize(), // get the form data
            type: 'POST', // GET or POST
            url: 'admin_user.php', // the file to call
            success: function(response) { // on success..
                $('#include').html(response); // update the DIV
            },
            error: function(jqXHR, textStatus, errorThrown){
                alert(textStatus);
            }
        });
        return false; // cancel original event to prevent form submitting
    });
});