Ajax，添加到数据库并更新div内容

Question

好的，所以我正在尝试使用Ajax。 我已经尝试了几种方法来执行此操作，但是没有任何工作对我有用。 我相信主要的问题是ajax不会添加到我的数据库中，其余的对我来说都是可以管理的。

这是相关的ajax代码：

$(document).ready(function(){
console.log($("going to attach submit to:","form[name='threadForm']"));
$("form[name='threadForm']").on("submit",function(e){
    e.preventDefault();
    var message = $("#message").val();
   //assumming validate_post returns true of false(y)
   if(!validatepost(message)){
       console.log("invalid, do not post");
       return;
   }
   console.log("submitting threadForm");
   update_post(message);
});
});

function update_post(message){
    var dataString = "message=" + message;
    alert(dataString);

    $.ajax({
        url: 'post_process.php',
        async: true,
        data: dataString ,
        type: 'post',
        success: function() {
            posts();
        }
    });
 }

 function posts(){
     console.log("getting url:",sessionStorage.page);
     $.get(sessionStorage.page,function(data){
         $("#threads").html(data);
     });
 }

 function validatepost(text){
     $(document).ready(function(){

    var y = $.trim(text);
    if (y==null || y=="") {
        alert("String is empty");
        return false;
    } else {
        return true;
    }
    }); 
  }

这是post_process.php：

<?php
    // Contains sessionStart and the db-connection
require_once "include/bootstrap.php";   

$message = $con->real_escape_string($_POST["message"]); 

if (validateEmpty($message)){
    send();
}

function send(){
    global $con, $message;

    $con->create_post($_SESSION['username'], $_SESSION['category'], $_SESSION("subject"), $message);
}

//header("Location: index.php");
?>

最后，这是html表单：

<div id="post_div">
<form name="threadForm" method="POST" action="">
    <label for="message">Meddelande</label><br>
    <textarea id="message" name="message" id="message" maxlength="500">

    </textarea><br>
    <input type="submit" value="Skicka!" name="post_btn" id="post_btn"><br>
</form>

create_post是我编写的一个函数，在我介绍ajax之前，它和其他所有东西都工作正常。

到目前为止，没有console.log：S可以访问。

当在网站上的页面之间跳转时，Ajax可以工作，但是上面的代码目前不执行任何操作。 而且，如果我将post_process.php作为表单操作并且不注释掉post_process-php中的标头，它也可以工作。

抱歉，我忘记了一些信息。 我很累，只想这个工作。

Answer 1

我首先通过删除button.submit.onclick并制作form.onsubmit = return update_post来测试update_post。 如果成功，则将validate_post作为条件放置在update_post中，如果（！validate_post（this））{return false;}

如果不成功，则问题出在php中。

您还可以调用posts（）来完成$ .get的工作。 您可以简单地在ajax返回中调用$ .get。 我不清楚您在“帖子”功能中要完成什么。

Answer 2

首先，您可以将表单提交给PHP，然后查看PHP是否完成了应做的工作。 如果是这样，请尝试使用JavaScript提交：

$("form[name='threadForm']").on("submit",function(e){
  e.preventDefault();
  //assumming validate_post returns true of false(y)
  if(!validate_post()){
    console.log("invalid, do not post");
    return;
  }
  console.log("submitting threadForm");
  update_post();
});

在安装了firebug插件的Chrome或firefox中按F12键，查看是否有任何错误。 POST也应显示在控制台中，以便您可以检查发布的内容。 请注意，当您未打开控制台（按F12打开）时，console.log会在IE中导致错误，如果要支持IE，则应删除日志。

您的函数文章可以使用jQuery并使代码更短：

function posts(){
  console.log("getting url:",sessionStorage.page);
  $.get(sessionStorage.page,function(data){
    $("#threads").html(data);
  });
}

更新

将事件侦听器附加到表单后，是否可以控制台记录是否找到该表单？

console.log($("going to attach submit to:","form[name='threadForm']"));
$("form[name='threadForm']").on("submit",function(e){
   ....

然后将表单的操作设置为google.com或其他内容，以查看表单是否已提交（如果代码有效，则不应该提交）。 然后，检查控制台以查看xhr请求，并查看请求/响应中是否有任何错误。

查看您的代码，看来您收到了错误的ajax请求。

函数update_post（message）{console.log（message）;

$.ajax({
    url: 'post_process.php',
    async: true,
    //data could be a string but I guess it has to
    // be a valid POST or GET string (escape message)
    // easier to just let jQuery handle this one
    data: {message:message} ,
    type: 'post',
    success: function() {
        posts();
    }
});

更新

您对Submit事件的绑定存在问题。 这是一个如何完成的示例：

<!DOCTYPE html>
<html>
  <head>
    <script src="the jquery library"></script>
  </head>
  <body>
<form name="threadForm" method="POST" action="http://www.google.com">
    <label for="message">Meddelande</label><br>
    <textarea id="message" name="message" id="message" maxlength="500">
    </textarea><br>
    <input type="submit" value="Skicka!" name="post_btn" id="post_btn"><br>
</form>
      <script>
$("form[name='threadForm']").on("submit",function(e){
  e.preventDefault();
  console.log("message is:",$("#message").val());
});   
      </script>
  </body>
</html>

即使消息具有2个id属性（您应该删除一个），它也可以正常工作，但不会提交表单。 也许您的html无效，或者您没有附加事件处理程序，而是查看更新的问题，我认为您已经知道如何使用document.ready，在我的示例中，我不需要使用document.ready，因为脚本可以访问表单加载html之后，如果脚本位于定义表单的html代码之前，则应准备使用文档。

Ajax，添加到数据库并更新div内容

问题描述

2 个解决方案

解决方案1
0 2014-06-01 00:06:43

解决方案2
0 2014-06-01 05:35:19

Ajax，添加到数据库并更新div内容

问题描述

2 个解决方案

解决方案1 0 2014-06-01 00:06:43

解决方案2 0 2014-06-01 05:35:19

解决方案1
0 2014-06-01 00:06:43

解决方案2
0 2014-06-01 05:35:19