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

如果没有太多代码，我就不能给你很多细节 - 但可以粗略地说出这个想法。

$.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 2

它的工作原理如下：

您的ajax函数会将数据发送到服务器。
服务器执行一个功能以响应数据，并且可选地将数据返回到发送请求的网页。
该数据作为ajax调用中成功函数的参数被接收。
该成功函数解包数据并使用新信息更新网页的DOM。

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

Answer 3

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

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

Problem name: aaaaProblem blurb: wwaa

首先，你应该返回类似于

的json

{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>");
    }
    });
});

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

4 个答案: