使用 AJAX 插入数据库后，如何使用插入的信息在同一页面上更新 div？

Question

我正在学习 jQuery 和改进我的 AJAX，我有点难过。

我这里有这个页面：http://www.problemio.com

您可以使用左侧的 div 向数据库中添加内容。它做到了。我不知道该怎么做是如何在左侧的表单执行后立即在右侧的 div 中显示新信息。有可能吗？

谢谢！

这里是提交 AJAX 请求的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript" >
$(function()
{
    $("input[type=submit]").click(function()
    //$("input[type=button]").click(function()
    {
        var name = $("#problem_name").val();
        var problem_blurb = $("#problem_blurb").val();

        var dataString = 'problem_name='+ name + '&problem_blurb=' + problem_blurb;

        if(name=='' || problem_blurb == '')
        {
            $('.success').fadeOut(200).hide();
            $('.error').fadeOut(200).show();
        }
        else
        {
            $.ajax({
                type: "POST",
                url: "/problems/add_problem.php",
                data: dataString,
                success: function()
                {
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
//alert ("before false");
        return false;
    });
});
</script>

Answer 1

它是这样工作的：

1. 您的 ajax 函数将数据发送到服务器。

2. 服务器执行一个函数来响应数据，并且可选地将数据返回给发送请求的网页。

3. 该数据作为参数接收到您的 ajax 调用中的成功函数。

4. 该成功函数解包数据并使用新信息更新网页的 DOM。

因此，您的服务器端函数必须打包并返回一些数据，这些数据将在您的成功函数中用于更新网页。这可能是成功函数可以插入到您网页上现有（例如）<div> 中的实际 HTML，或者它可能是 JSON 或 XML，由您在成功函数中编写的代码解析并分段使用更新网页。

Answer 2

如果没有太多代码，我无法为您提供更多细节 - 但可以粗略地提出这个想法。

$.post('db-processing.php', {vars: 'whatever'}, function(data) {
// data is whatever db-processing.php writes to the page.
// if you want something to show up as a result - 
// have the db-processing.php echo - "Success / fail or whatever" 
$('#sidebar').html(data);
});

更新现在看到你的代码了：

$(function() {
$("input[type=submit]").click(function() {
    var name = $("#problem_name").val();
    var problem_blurb = $("#problem_blurb").val();

    var dataString = 'problem_name='+ name + '&problem_blurb=' + problem_blurb;

    if(name=='' || problem_blurb == '')
    {
        $('.success').fadeOut(200).hide();
        $('.error').fadeOut(200).show();
    }
    else
    {
        $.ajax({
            type: "POST",
            url: "/problems/add_problem.php",
            data: dataString,
            success: function(data)
            {
                $('#results_div').html(data);
                $('.success').fadeIn(200).show();
                $('.error').fadeOut(200).hide();
            }
        });
    }
//alert ("before false");
    return false;
});
});

仍然是函数（数据） - 将数据放在某处是重要的部分。

Answer 3

您应该向我们展示您提交 ajax 请求的代码。

我在您的页面中输入了一个值。响应包含

Problem name: aaaaProblem blurb: wwaa

首先，您应该返回类似于

{name: "aaaa", blurb: "wwaa"}

在执行插入的请求的success 回调中，您需要处理响应，然后抓取一个 div 并将响应填充在那里。所以如果你有一个div 和id=#container 或类似的东西，你可以这样做

var newDom = "<div>" + response.name + "</div>";
$('#container').html(newDom);

$('#container') 代码告诉 jquery 获取 id 为 container 的 div（id 必须是唯一的），html(...) 部分是一种将新 dom 放入元素中的方法。

Answer 4

成功提交表单后，您从服务器获得了什么？

是json吗？

xml?

html?

比如说你有以下 ajax 调用

    $("input.button").click(function(e){
    e.preventDefault(); //prevent the default submission of the form
    //var name=$("#problem_name").val();// get the name input value
    //var desc=$("#problem_blurb").val(); // get the description 
    $.ajax({
    data:{problem_name:name,problem_blurb:desc},
    //other parameters,
    success:function(data){
    //give some id to your right div
    $("#RightDIV").append("<p>Name:"+name+"<p>");
    $("#RightDIV").append("<p>Desc:"+desc+"<p>");
    }
    });
});