javascript - jQuery - Ajax POST 似乎不起作用

Question

这是我的 HTML 代码:

<div class="form-horizontal row-border">
        <div class="form-group">
            <label class="col-md-2 control-label">Title:</label>
            <div class="col-md-10"><input class="form-control" id="title" name="title" type="text"></div>
        </div>
        <div class="form-group">
            <label class="col-md-2 control-label">Article:</label>
            <div class="col-md-10">
                <textarea name="editor1" id="editor" rows="10" cols="80">
                                Let's go...
                            </textarea>     
            </div>
        </div>                                  
        <div class="form-group">
            <label class="col-md-2 control-label">Tags:</label>
            <div class="col-md-10"><input class="tags" id="tags" type="text" value="">
            </div>
        </div>
        <div class="row" style="margin-left:92%;">
        <input type="button" id="PostArticle" class="btn btn-success" value="Post Article"></input>
        </div>
</div>

这是我的 JavaScript 代码:

<script type="text/javascript">     
        $("#PostArticle").click(function() {                    
            var title = $("#title").val();
            var text = $("#editor").text();
            var tags = $("#tags").val();

                $.ajax({
                    url: 'post_new_article.php',
                    type: 'POST',
                    data: {
                        title: title,
                        tags: tags,
                        text: text
                    },
                    dataType: 'json',
                    success: function (data) {                                  
                        noty({text: 'MySite.com:' + data.title + ' was successfully created!', type: 'success'});

                    },
                      error: function(XMLHttpRequest, textStatus, errorThrown) {
                        noty({text: 'Failure - The article was not created! Error is: ' + errorThrown + '', type: 'error'});
                      }
                });

        }); 
</script>

以下是来自 post_new_article.php 的代码:

<?php

require "include/config.php";
require "include/functions.php";

ConnectWithMySQLDatabase();

error_reporting(E_ALL);
ini_set('display_errors', '1');

$title = $_POST['title'];
$text = $_POST['text'];
$tags = $_POST['tags'];
$month = date('F');
$year = date('Y');
$day = date('d');

if(isset($_POST['title']))  
{
    mysql_query("INSERT INTO `Blog` (`id`, `Title`, `Article`, `Autor`, `Date`, `Month`,`Year`, `Tags`, `Image`) VALUES ('', '$title', '$text', 'Venelin Vasilev', '$day','$month', '$year', '$tags', '')");
}

$result['title'][0] = $title;

echo json_encode($result);

从所有方面来看，似乎只有 MySQL 的插入功能不起作用。我可以确认 ConnectWithMySQLDatabase(); 函数正在按预期工作，并且该函数正在建立与 MySQL 的连接。

不知怎的，在我点击发布文章按钮后，我似乎无法插入mysql查询。我可以确认我收到了来自 post_new_article.php 的响应，因为我收到了一条包含文章标题的通知作为回复响应。所以json似乎读回了文章的标题。

那么你能帮我解决这个问题并使其将查询插入 MySQL 数据库吗？

提前致谢!

Answer 1

试试这个

在您的表单中，提交按钮应该是

<input type="submit" id="submit" class="btn btn-success" value="Post Article"></input>

AJAX 应该是

<script>
  $(function(){
      $( "#submit" ).click(function(event)
      {
         event.preventDefault();

        var title = $("#title").val();
         var text = $("#editor").text();
         var tags = $("#tags").val();


         $.ajax(
             {
               type:"post",
               dataType: 'json',
               url: "./post_new_article.php",
               data:{ title:title, text:text,tags:tags},
               success:function(data)
               {

               }
            });
      });
  });
</script>

编辑01

改变这个

mysql_query("INSERT INTO Blog (id, Title, Article, Autor, Date, Month,Year, Tags, Image) VALUES ('', '$title', '$text', 'Venelin Vasilev', '$day','$month', '$year', '$tags', '')");