Question

很抱歉，但我知道类似的内容已经发布了。我已经尝试了每一个资源并进行了我的研究，但我仍然无法找到我的代码有什么问题。我正在使用带有php的Ajax Post。一切似乎工作得很好，除了div没有在提交时重新加载。刷新页面后，我发布的内容出现了。有人可以告诉我我做错了什么。

js code：

$(function() {
    $('.error').hide();
    $('input.text-input').css({
        backgroundColor: "#FFFFFF"
    });
    $('input.text-input').focus(function() {
        $(this).css({
            backgroundColor: "#C0DDFA"
        });
    });
    $('input.text-input').blur(function() {
        $(this).css({
            backgroundColor: "#FFFFFF"
        });
    });

    $(".button").click(function() {
        // validate and process form
        // first hide any error messages
        $('.error').hide();


        var email = $("input#email").val();
        if (email == "") {
            $("label#email_error").show();
            $("input#email").focus();
            return false;
        }


        var dataString = '&email=' + email;
        //alert (dataString);return false;
        $.ajax({
            type: "POST",

            url: "../EdinburgCISD/Gorena/Gorena.php",
            data: dataString,
            success: function(data) {
                $("#email").val('');


                $("#div").fadeOut(1000);
                // Change the content of the message element
                $("#div").html(data);

                // Fade the element back in
                $("#div").fadeIn(1000);


            }
        });
        return false;
    });
});

html代码：

这就是我的div。

 <div id="div"> <?php \\database select query ?> </div>

我是这个网站的新手抱歉，如果我发布了错误的内容......

Answer 1

稍微修改你的代码看看评论，你应该指定dataType:html（参见ajax部分）。

$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
  $(this).css({backgroundColor:"#C0DDFA"});
 });//focus ends

 $('input.text-input').blur(function(){
   $(this).css({backgroundColor:"#FFFFFF"});
 });//blur ends

  $(".button").click(function() {
    // validate and process form
    // first hide any error messages
    $('.error').hide();
    var email = $("input#email").val();
    if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }

    //var dataString = '&email=' + email; commented out 
     var dataString = email; //try insted this
    //alert (dataString);return false;

    $.ajax({
  type: "POST",
  dataType:'html', //or the appropiate type of data you are getting back
  url: "../EdinburgCISD/Gorena/Gorena.php",
  data: {email:dataString},     //in the php file do $email = $_POST['email'];
  async:false, //not a good practice but you can try with it and without it
  success: function(data) {
     $("#email").val('');
     $("#div").fadeOut(1000);
     // Change the content of the message element
     $("#div").html(data);
   // Fade the element back in
     $("#div").fadeIn(1000);
     }
    });  //ajax ends            
  return false;
 });//click ends    
});//document ready ends

<强>更新

看到这个小提琴，你会得到这个想法http://jsfiddle.net/3nigma/LuCQw/并且延迟功能是可选的我已经使用它以使效果显着

Answer 2

你在控制台（firebug /开发人员工具）中遇到任何错误吗？

否则你可以尝试下面的

检查警告

 $.ajax({
  type: "POST",
  url: "../EdinburgCISD/Gorena/Gorena.php",
  data: dataString,   
  success: function(data) {
     alert(data);//what you get here? are you getting "object" in alert? then you need to specify property or mention dataType

     $("#email").val('');
     $("#div").fadeOut(1000);
     // Change the content of the message element
     $("#div").html(data);
    // Fade the element back in
       $("#div").fadeIn(1000);
     }
  });

使用ajax更新div无法正常工作

2 个答案: