通过JavaScript将值传递给php脚本

时间:2015-11-30 02:48:44

标签: javascript php jquery html

我试图根据div / form的输入值显示php文件的结果。

我有以下JavaScript:

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

        $('#ranksubmit').click(function() { 
            $.ajax({
            type: "post",
            url: "queryrankings.php",
            data:  $("#query-form").serialize(),
            success: function(result){
                $(".results-table").html(result);
            }

        });
            //return false;
      }); 

    });
</script>

它应该将此div的值传递给php脚本queryrankings.php:

 <div class="form-horizontal" id="query-form"  >
                <fieldset>

                <!-- Form Name -->
                <legend class = "text-center">Query Rankings<hr></legend>

                <!-- Multiple Radios (inline) -->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="ranktype">Ranking Type:</label>
                  <div class="col-md-4"> 
                    <label class="radio-inline" for="ranktype-0">
                      <input type="radio" name="ranktype" id="ranktype-0" value="1" checked="checked">
                      Author
                    </label> 
                    <label class="radio-inline" for="ranktype-1">
                      <input type="radio" name="ranktype" id="ranktype-1" value="2">
                      University
                    </label>
                  </div>
                </div>

                <!-- Select Basic -->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="startyear">From:(ie. 2010)</label>
                  <div class="col-md-4">
                    <select id="startyear" name="startyear" class="form-control">
                      <option value="2010">2010</option>
                      <option value="2011">2011</option>
                      <option value="2012">2012</option>
                      <option value="2013">2013</option>
                      <option value="2014">2014</option>
                      <option value="2015">2015</option>
                    </select>
                  </div>
                </div>

                <!-- Select Basic -->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="endingyear">To:(ie. 2015)</label>
                  <div class="col-md-4">
                    <select id="endingyear" name="endingyear" class="form-control">
                      <option value="2010">2010</option>
                      <option value="2011">2011</option>
                      <option value="2012">2012</option>
                      <option value="2013">2013</option>
                      <option value="2014">2014</option>
                      <option value="2015" selected="selected">2015</option>
                    </select>
                  </div>
                </div>


                <!-- Multiple Radios (inline) -->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="journalselection">Journal Selection:</label>
                  <div class="col-md-4"> 
                    <label class="radio-inline" for="journalselection-0">
                      <input type="radio" name="journalselection" id="journalselection-0" value="all" checked="checked" onclick="CheckBoxes(1)" >
                      All Journals
                    </label> 
                    <label class="radio-inline" for="journalselection-1">
                      <input type="radio" name="journalselection" id="journalselection-1" value="basket" onclick="CheckBoxes(2)">
                      AIS Basket of Journals
                    </label>
                    <label class="radio-inline" for="journalselection-2">
                      <input type="radio" name="journalselection" id="journalselection-2" value="top2" onclick="CheckBoxes(3)">
                      Top 2 Journals
                    </label>
                    <label class="radio-inline" for="journalselection-3">
                      <input type="radio" name="journalselection" id="journalselection-3" value="custom" onclick="CheckBoxes(4)">
                      Custom Selection
                    </label>
                  </div>
                </div>


                <!-- Multiple Checkboxes (inline) -->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="journals">Journals:</label>
                  <div class="col-md-4">
                    <label class="checkbox-inline" for="journals-0">
                      <input type="checkbox" name="journals" id="journals-0" value="misq" checked onclick="CustomSelection()">
                      MISQ
                    </label>
                    <label class="checkbox-inline" for="journals-1">
                      <input type="checkbox" name="journals" id="journals-1" value="isr" checked onclick="CustomSelection()">
                      ISR
                    </label>
                    <label class="checkbox-inline" for="journals-2">
                      <input type="checkbox" name="journals" id="journals-2" value="jmis" checked onclick="CustomSelection()">
                      JMIS
                    </label>
                    <label class="checkbox-inline" for="journals-3">
                      <input type="checkbox" name="journals" id="journals-3" value="jais" checked onclick="CustomSelection()">
                      JAIS 
                    </label>
                    <label class="checkbox-inline" for="journals-4">
                      <input type="checkbox" name="journals" id="journals-4" value="ejis" checked onclick="CustomSelection()">
                      EJIS
                    </label>
                    <label class="checkbox-inline" for="journals-5">
                      <input type="checkbox" name="journals" id="journals-5" value="isj" checked onclick="CustomSelection()">
                      ISJ
                    </label>
                    <label class="checkbox-inline" for="journals-6">
                      <input type="checkbox" name="journals" id="journals-6" value="jsis" checked onclick="CustomSelection()">
                      JSIS
                    </label>
                    <label class="checkbox-inline" for="journals-7">
                      <input type="checkbox" name="journals" id="journals-7" value="jit" checked onclick="CustomSelection()">
                      JIT
                    </label>
                    <label class="checkbox-inline" for="journals-8">
                      <input type="checkbox" name="journals" id="journals-8" value="dss" checked onclick="CustomSelection()">
                      DSS
                    </label>
                    <label class="checkbox-inline" for="journals-9">
                      <input type="checkbox" name="journals" id="journals-9" value="iandm" checked onclick="CustomSelection()">
                      I&M
                    </label>
                  </div>
                </div>

                <!-- Select Basic -->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="selectbasic">COMING SOON!  Category:</label>
                  <div class="col-md-4">
                    <select disabled id="selectbasic" name="selectbasic" class="form-control">
                      <option value="1">Region, NCAA Conference, & More!</option>
                      <option value="2">N/A</option>
                    </select>
                  </div>
                </div>

                <!-- Button -->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="ranksubmit"></label>
                  <div class="col-md-4">
                    <button id="ranksubmit"  class="btn btn-default-border wow tada">Submit</button>
                  </div>
                </div>

                </fieldset>
                </div>

当我尝试$_POST php脚本中的值时,它不起作用。不应该读取这个div中的值吗?

这是php。它将返回一个常规的print语句,但它不会打印我假设的已发布变量,因为它没有读取任何内容:

<?php

		$dbHost = "localhost";
		$dbUsername = "user_rw";
		$dbPassword = "";
		$dbName = "webdb";

		// Create connection
		$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
		// Check connection
		if ($db->connect_error) {
		die("Connection failed: " . $db->connect_error);
		} else {
		
		$type = $_POST['ranktype'];
		print $type;

		}
?>

我使用的是<div>而不是<form>,因为我不想在点击提交按钮时重新加载页面。

1 个答案:

答案 0 :(得分:0)

<div class="form-horizontal" id="query-form"  > ...</div>

应为form tag

<form class="form-horizontal" id="query-form"  > .... </form>

<强>更新

$('#ranksubmit').click(function(e) {
  e.preventDefault()
 // the rest of the code
}); 

使用<input type="button"/>e.preventDefault()return false阻止表单提交。