发布到php脚本时,jQuery AJAX请求不会被触发。

时间:2015-02-04 17:29:45

标签: php jquery ajax

我有一个数据库表,我试图使用JQUERY AJAX检索数据。当我的第一个页面加载时,它会对表进行php调用并填充select表单元素。 - 这很有效 然后,我想选择一个提交表单的选项,并通过Ajax返回该行。 以前我的脚本只使用PHP文件但是无法使用它。提交表单时,我的网址正在更改:

http://localhost/FINTAN/testertester.php?name=Specifics.

我没有收到任何回报。另外,在查看我的控制台时,我得到了一个未定义的jquery 工厂(jquery)。我可以在我的jquery ui.js中找到有问题的行。不确定这是问题还是我的代码导致了问题。我已经清除了firefox缓存,因为我没有通过jquery方法成功调用AJAX,我猜测它是我的代码。

要获得下面的代码,我已经混合并匹配了一本书和一个在线教程以及许多其他来源,这不是我的第一次尝试。理想情况下,我想输出表格行。然而,只是让一个请求工作并且知道它不是冲突或兼容性问题会让我感觉更好而且在我开始之前不会受到阻碍

    

   <script src="jquery/jquery-ui-1.11.2/jquery-ui.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

   <script>

   $(document).ready(function(){
       $("#btn").click(function(){
           var vname = $("#name").val;
       } 
   }
   $.post("addithandle1.php",
   {
       name:vname};

   function(response,status){   
       alert("recieved data-------*\n\nResponse : " + response 
               +"\n\nStatus : " + status);
   }
   }
   </script>
</head>
<body>  
    <?php
include "config.php";

if (mysqli_connect_errno($con))
{

}
else
{
  $result = mysqli_query($con, "SELECT * FROM script ");



     echo " <Form  method='post'> <label>Script :</label> <select id='name'  name='name' >";
}
    while($row = mysqli_fetch_array($result))
    {   

    echo "<option value = '".$row['scriptname']."'>".$row['scriptname']."</option>"; 
    } 
  echo "</select>";  
           echo "<button id='btn'  class='btn-search'>Load Script </button></form>";     
?>
</body></html>

这是我试图从

中检索的PHP文件
 <?php
include 'config.php';

$batchtype2 = $_POST['name'];


$batchtype2 = mysqli_real_escape_string($con,$batchtype2);
$sql = "SELECT * FROM script WHERE scriptname  = '".$batchtype2."' ";       


$result = mysqli_query($con,$sql);

$count=mysqli_num_rows($result);

if($count==0 ){
    echo "</br></br></br></br></br></br></br><p> No Matching results found</p>";
}

else{
    while($row = mysqli_fetch_array($result)) {

        echo '<tr><td>'.$row['scriptname'].'</td></tr>';
  echo '<tr><td>'.$row['scripthours'].'</td></tr>';
   echo '<tr><td>'.$row['scripttotal'].'</td></tr>';


 }
}
mysqli_close($con);
?>

提前感谢您提供任何帮助

2 个答案:

答案 0 :(得分:1)

通过在JavaScript / jQuery中进行以下更正(您有一些语法问题以及应在浏览器控制台中显示的使用问题),这将像您期望的那样工作 -

请务必更改此行 -

var vname = $("#name").val;

到此 -

var vname = $("#name").val(); // note the parentheses

在您的函数中 -

$(document).ready(function(){
    $("#btn").click(function(e){
       e.preventDefault(); // prevent the default action of the click
           var vname = $("#name").val();
           $.post("addithandle1.php", {name:vname}, function(response, status) { // POST instead of GET
               // never use alert() for troubleshooting
               // output for AJAX must be in the callback for the AJAX function
               console.log("recieved data-------*\n\nResponse : " + response +"\n\nStatus : " + status);
               $('#table').html(response); // put response in div
        });
    });
});

现在$_POST['name']应该正确填充。

要让表格显示在您的请求页面中,请首先确保您的PHP完全构成表格。

在您的请求页面添加div并修改上面的AJAX调用,如图所示。

<div id="table"></div>

现在,当您发出请求时,请求页面上的div将使用从PHP脚本返回的内容进行更新。

答案 1 :(得分:0)

您的脚本有几个方面。

首先要确保你编写结构良好的代码,并且它没有错误/破坏。

你有$(document).ready(function(){只有按钮的.click事件,但是你把ajax请求留在了外面,我想你是这样做的,所以它也会在那里发出ajax请求第一页加载

问题是现在它只会在第一页加载时出现,但是当你单击按钮时,单击按钮时你只能获得名称的值。

我建议你尝试这样的事情:

<script>

$(document).ready(function() {
    // bind button click and load data
   $("#btn").click(function(){
       loadData();
       return false; // prevent browser behaviour of the button that would submit the form
   }
   // load data for the first time
   loadData();
};

function loadData() {
    var vname = $("#name").val;
    $.post("addithandle1.php", { name:vname }, function(response, status) {
       alert("recieved data-------*\n\nResponse : " + response 
               +"\n\nStatus : " + status);
    });
}

</script>

一些注意事项:

  • 我建议始终将jquery代码放在$(document).ready中,因为这可以保证在运行之前加载jquery
  • 默认情况下,您单击提交按钮的表单将获取浏览器提交的表单,如果您使用ajax,则应该在按钮单击事件或具有onsubmit =&#的表单上阻止该行为34;返回false&#34;。