无法使用jQuery& amp;在php中的AJAX

时间:2016-06-12 05:41:15

标签: javascript php jquery mysql ajax

我可以使用纯php和mysql将数据插入数据库。但是无法使用jQuery& amp; PHP中的AJAX。 AJAX错误只显示一个错误:即请检查您的网络连接。请帮我解决这个问题。

我的jQuery AJAX代码,PHP代码,HTML代码如下所示。

  

HTML --- news.php

    <div id="error"></div>
                <form method="post" class="form-horizontal" role="form" name="newsForm">

  <div class="form-group">
    <label class="control-label col-sm-2">News Heading</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="newsHeading" name="newsHeading" placeholder="Enter News Heading">
    </div>
  </div> <!--News Heading-->

  <div class="form-group">
    <label class="control-label col-sm-2">News Source URL</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="newsSource" name="newsSource" placeholder="Enter News Source URL">
    </div>
  </div> <!--News Source-->

  <div class="form-group">
    <label class="control-label col-sm-2">News Content</label>
    <div class="col-sm-10"> 
     <textarea class="form-control" rows="3" id="newsContent" name="newsContent" placeholder="News Content"></textarea>
    </div>
  </div><!--News Data-->

  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" id="postNews" name="postNews" class="btn bg-red">Submit</button>
    </div>
  </div> <!--Submit Button-->


</form>
  

如果我在news.php中编写简单PHP代码,它可以正常工作。将数据插入数据库。

<?php
                 if(isset($_POST['postNews'])===true)
            {
                $heading = $_POST['newsHeading'];
                $source = $_POST['newsSource'];
                $content = $_POST['newsContent'];
                $query = mysql_query("INSERT INTO `news`(`news_heading`,`news_source`,`news_content`) VALUES('$heading','$source','$content')");

            }
?>

以下脚本仅显示AJAX网络连接错误。无法将数据插入数据库。

  

jQuery&amp; AJAX

<script>
      $(document).ready(function(){

        $("#postNews").click(function(){
            var newsHeading = $("#newsHeading").val();
            var newsSource = $("#newsSource").val();
            var newsContent = $("#newsContent").val();
            var dataString = 'newsHeading='+newsHeading+'&newsSource='+newsSource+'&newsContent='+newsContent;

            alert(dataString); //
            if($.trim(newsHeading).length>0 && $.trim(newsSource).length>0 && $.trim(newsContent).length>0)
            {
              $.ajax({
                   type: "POST",
                   url: "core/news-post-process.php",
                   data: dataString,
                   cache: false,
                   beforeSend: function(){ 
   $("#error").html("<div class='alert alert-primary bg-primary'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><strong>Please Wait, We are processing.</strong> </div>");

  $("#postNews").html("<i class='fa fa-spinner fa-pulse'></i><span class='sr-only'>Loading...</span> Posting....");
 },
                   success: function(data){
                          if(data=="success"){
                              $("#error").html("<div class='alert alert-success bg-green'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><strong>Successfully Inserted</strong> </div>");
                          }
                          else{
                                  $("#error").html("<div class='alert bg-red'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><strong>Can't Insert</strong> </div>");
                          }
                   },

                   error: function(XMLHttpRequest, textStatus, errorThrown) { 
                        if (XMLHttpRequest.readyState == 4) {
            // HTTP error (can be checked by XMLHttpRequest.status and XMLHttpRequest.statusText)

            $("#error").html("<div class='alert bg-yellow'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><strong>HTTP Request Error</strong> </div>");

        }
        else if (XMLHttpRequest.readyState == 0) {
            // Network error (i.e. connection refused, access denied due to CORS, etc.)
            $("#error").html("<div class='alert bg-yellow'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><strong>Please Check Your Network Connection</strong> </div> ");

        }
        else {
            // something weird is happening
             $("#error").html("<div class='alert bg-yellow'><a href='#' class='close' data-dismiss='alert' aria-label='close'>&times;</a><strong>Some Error Occured</strong> </div>");
        }

                   }
              });
            }

        });

      });
    </script>
  

芯/ dbconnect.php

<?php
error_reporting( E_ALL & ~E_DEPRECATED & ~E_NOTICE );
if(!mysql_connect("localhost","root",""))
{
    die('oops connection problem ! --> '.mysql_error());
}
if(!mysql_select_db("admin"))
{
    die('oops database selection problem ! --> '.mysql_error());
}

?>
  

芯/新闻后process.php

<?php
session_start();
include_once 'dbconnect.php';

if(isset($_POST['newsHeading']) && isset($_POST['newsSource']) && isset($_POST['newsContent']))
{
  $newsHeading = mysql_real_escape_string($_POST['newsHeading']);
  $newsSource = mysql_real_escape_string($_POST['newsSource']);
  $newsContent = mysql_real_escape_string($_POST['newsContent']);

  /*$newsHeading = trim($newsHeading);
  $newsSource = trim($newsSource);
  $newsContent = trim($newsContent);*/

  $query = mysql_query("INSERT INTO `news`(`news_heading`,`news_source`,`news_content`) VALUES('".$newsHeading."','".$newsSource."','".$newsContent."')");


if ($query) {
        echo "Sucess";
    }
    else{
        echo "Failed";

    }
}


?>

为什么jQuery和AJAX不能很好地工作?

1 个答案:

答案 0 :(得分:0)

将您的表单标记更改为此....

     <form class="form-horizontal" role="form" name="newsForm">
    </form>

当谈到使用ajax发布数据时,你会注意到你正在ajax调用本身编写方法,如:

 $.ajax({
    method:"post",

    });   

所以你不需要在表单标签中提及post方法