jquery ajax发布并进入单页

时间:2017-12-05 16:13:45

标签: jquery ajax

我正在尝试发布一些数据并获取这些数据。在页面加载时,我显示数据。有用。但是一旦我发布数据,它就会发布在数据库中,但不会显示在页面中。加载页面后,只显示。

我需要在没有页面重新加载的情况下将数据发布到同一页面中来显示数据。

这是我的代码:

<script>
$(document).ready(function() {
    $.ajax({
              type: "GET",
              url: "employees.php",
              success: function(data) {   
                    $("#result").html(data);
              }
    }); 

    $("#create").click(function(e) {
        e.preventDefault();
        var name = $("#name").val();
        var age = $("#age").val();
        var gender = $("#gender").val();
        var salary = $("#salary").val();
        $.ajax({
            url: "create_employees.php",
            type: "POST",
            data: 
                {
                    name:name,
                    age:age,
                    gender:gender,
                    salary:salary
                }
        }).success(function (response){
            console.log(response);

        });
    });
});

<form>  
    Name  : <input type="text" name="name" id="name"><br />         
    Age   : <input type="age" name="age" id="age"><br />  
    Gender: <input type="radio" name="gender" id="gender" value="male" checked>Male
            <input type="radio" name="gender" id="gender" value="female">Female<br />``
    Salary: <input type="text" name="salary" id="salary"><br />   
    <button id="create">Create</button> 
</form>  
<div id="result"></div>

1 个答案:

答案 0 :(得分:0)

因为您未在页面的任何位置显示数据。看看你的AJAX成功处理程序:

a

它只做一件事......将响应记录到控制台。没别了。

你想要它做什么?什么是.success(function (response){ console.log(response); }) 以及如何使用它更新页面?嗯,这真的取决于你。

response HTML数据吗?您可以将其作为元素的内容附加:

response

$('#someElement').append(response); JSON数据吗?您可以使用它中的值来设置一些HTML值:

response

等等。关键是,如果要在页面上显示数据,则需要编写逻辑来完成该操作。系统无法自动为您执行此操作。