PHP可以使用HTML，但不能使用jquery - PHP works with HTML but not with jquery

我想使用jquery调用php来在同一页面上显示数据。然而，如果我使用jquery来调用数据，我会一直得到"0结果"，但当我使用提交按钮时，我会在.php窗口中得到正确的数据。。。感谢您的帮助！非常感谢。

哦，我在不同的文件中有三个脚本，但在html文件中链接了头部的jquery。提前感谢！

HTML

<form method="post" action="contract.php">
 <fieldset>
    <div class="wrap_21">
      <fieldset id="accountnumber">
               <input type="text" name="accountnumber" placeholder="Account Number" value="" required style="width:240px; height:24px"/>
      </fieldset>
    </div>
    <div class="wrap_16">
              <fieldset id="tradetype">
                   <span class="text_9">TRADE:</span>
                   <span class="text_11">
                   <input type="radio" name="tradetype" required value="Buy"/> Buy
                   <input type="radio" name="tradetype" value="Sell"/> Sell </span>
              </fieldset>
              <fieldset>
                  <span class="text_9">PRICE:</span>
                  <span class="text_11">
                  <input type="text" name="price" value="" required /></span>
              </fieldset>
              <fieldset>
                  <span class="text_9">DATE:</span>
                  <select name="date" id="date" onchange="showData(this.Value)">
                      <option value="">Select</option>
                      <option value="24 November 2015">24-Nov-15</option>
                      <option value="24 December 2015">24-Dec-15</option>
                      <option value="24 January 2015">24-Jan-15</option>
                  </select>
              </fieldset>
          <input type="submit" name="formSubmit" value="Submit">
 </fieldset>

PHP

    <?php
  $servername = "localhost";
  $username = "";
  $password = "";
  $dbname = "";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
     die("Connection failed: ". $conn->connect_error);
}
$tradetype=$_POST['tradetype'];
$price=$_POST['price'];
$date=$_POST['date'];
$sql = "SELECT * FROM Contracts WHERE Trade='$tradetype' AND ExpiryDate='$date'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    //output data of each row
    while($row = $result->fetch_assoc()) {
        echo "Premium: " . $row["Premium"]. " Discount: " . $row["Discount"] . "<br>";
    }
} else {
    echo "0 results";
}
$conn->close();
?>

Jquery

    function showData(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","contract.php?q="+str,true);
  xmlhttp.send();
}

这就是您的问题：showData(this.Value)，在您的php中有3个post变量，您只发送了一个

试试这样的东西：

从所选中删除onchange="showData(this.Value)

$('select[name="date"]').on('change',function(e){
  e.preventDefault();
  var parent = $(this).parents('form');
  $.ajax({url: "contract.php",
   type:"POST",
   data:{
       'tradetype':parent.find('input[name="tradetype"]').val(),
       'price':parent.find('input[name="price"]').val(),
       'date':parent.find('option:selected').val()
   },
  success: function(result) {
    $("#result").html(result);
}});

完整的html代码：-

<form method="get" id="formpge" action="">
 <fieldset>
    <div class="wrap_21">
      <fieldset id="accountnumber">
               <input type="text" name="accountnumber" id="accountnumber" placeholder="Account Number" value="" required style="width:240px; height:24px"/>
      </fieldset>
    </div>
    <div class="wrap_16">
              <fieldset id="tradetype">
                   <span class="text_9">TRADE:</span>
                   <span class="text_11">
                   <input type="radio" name="tradetype" id="tradetype" required value="Buy"/> Buy
                   <input type="radio" name="tradetype" id="tradetype" value="Sell"/> Sell </span>
              </fieldset>
              <fieldset>
                  <span class="text_9">PRICE:</span>
                  <span class="text_11">
                  <input type="text" name="price" id="price" value="" required /></span>
              </fieldset>
              <fieldset>
                  <span class="text_9">DATE:</span>
                  <select name="date" id="date" >
                      <option value="">Select</option>
                      <option value="24 November 2015">24-Nov-15</option>
                      <option value="24 December 2015">24-Dec-15</option>
                      <option value="24 January 2015">24-Jan-15</option>
                  </select>
              </fieldset>
          <input type="button" name="formSubmit" id="formSubmit" value="Submit">
          <div id="result"></div>
 </fieldset>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
  $(document).ready(function(){ //newly added 
      $( "#date" ).change(function() {
        event.preventDefault();
            var data = $( "#formpge" ).serialize();
            var url = 'contract.php?'+data;
              $.get( , function( data ) {
                $( "#result" ).html( data );
            });
      });
  });
  </script>

在php中将$_POST更改为$_GET；

您尚未通过

商品类型、价格、日期；请求中的参数

所以试试

function showData(str) {
   var data={
       tradetype :$('#tradetype').val(),
       price:$('#price').val(),
       date:$('#date').val()
  };
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST","contract.php",true);
  xmlhttp.send(data);
}

您可以在这里获得详细的教程-

http://www.a100websolutions.in/retrieve-data-using-jquery-php/

完整教程，演示如何在后台使用AJAX/JQuery和PHP从数据库中获取数据。此外，代码在里面，所以你也可以参考代码。