javascript - jQuery 表单提交后返回空白页

Question

我以前创建过表单，它们通常可以工作，但我对 jquery 很陌生，我想知道这里是否有什么不同。当我点击“提交”按钮提交表单时，它会将我定向到“strategyreview.php”，但页面是空白的。我知道该页面通常不是空白的，因为我可以直接加载它。

请帮忙。

表单:strategy.php

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- JS -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>jQuery.noConflict();</script>

<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Glegoo:400,700' rel='stylesheet' type='text/css'><!--Glegoo -->
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'><!--Abel -->

<style>
  #title {
    font-size: 4vh;
  }
</style>


<form action="strategyreview.php" method="post">
<div class="ui-corner-all custom-corners">
  <div class="ui-bar ui-bar-a" id="title">
    <h3 class="title">Strategy Testing</h3>
  </div>
  <div class="ui-body ui-body-a">

    <!--Strategy Title -->
    <h3 class="ui-bar ui-bar-a ui-corner-all">New Strategy</h3>
    <div class="ui-body ui-body-a ui-corner-all">
      <div class="ui-field-contain">
        <label>Strategy Name</label>
        <input name="strategyname" type="text" class="form-control" placeholder="Monthly Low Risk" required>
      </div>
    </div>

    <!--Initial Spread Criteria:-->
    <h3 class="ui-bar ui-bar-a ui-corner-all">Spread Criteria</h3>
    <div class="ui-body ui-body-a ui-corner-all">
      <div class="ui-field-contain">
        <div class="ui-field-contain">
          <label>Symbols:</label>
          <select name="symbols" multiple="multiple" data-native-menu="false" style="width:50px;">
            <option>Symbols</option>
            <option value="1">NFLX</option>
            <option value="2" selected="selected">SPY</option>
            <option value="3" selected="selected">SPX</option>
            <option value="2" selected="selected">SPY</option>
            <option value="3" selected="selected">SPX</option>
            <option value="2" selected="selected">SPY</option>
            <option value="3" selected="selected">SPX</option>
            <option value="2" selected="selected">SPY</option>
            <option value="3" selected="selected">SPX</option>
          </select>
        </div>
        <div class="ui-field-contain">
          <label>Spread Types:</label>
          <select name="spreadtype" multiple="multiple" data-native-menu="false" style="width:50px;">
            <option>Spread Types</option>
            <option value="Bull Put" selected="selected">Bull Put</option>
            <option value="Bear Call" selected="selected">Bear Call</option>
          </select>
        </div>
      </div>
    </div>

    <!--Entry Criteria:-->
    <h3 class="ui-bar ui-bar-a ui-corner-all">Entry Criteria</h3>
    <div class="ui-body ui-body-a ui-corner-all">
      <div class="ui-field-contain">
        <div data-role="rangeslider" data-track-theme="a" data-theme="b">
          <label>Expiration Distance:</label>
          <input name="expirationdistancelow" min="0" max="100" value="0" type="range" />
          <label for="range-7b">Rangeslider:</label>
          <input name="expirationdistancehigh" min="0" max="100" value="35" type="range" />
        </div>
      </div>
      <label>
        <input type="checkbox" name="includeweeklyexpirations">Include Weekly Expirations
      </label>

      <div class="ui-field-contain">
        <label>Maximum Delta:</label>
        <input type="range" name="entrymaximumdelta" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="0.25" value="0.08" step="0.01">
      </div>

      <div class="ui-field-contain">
        <div data-role="rangeslider" data-track-theme="a" data-theme="b">
          <label>Spread Width:</label>
          <input name="spreadwidthlow" min="0" max="25" value="5" type="range" />
          <label for="range-7b">Rangeslider:</label>
          <input name="spreadwidthhigh" min="0" max="25" value="15" type="range" />
        </div>
      </div>

      <div class="ui-field-contain">
        <label>Minimum Distance (%):</label>
        <input type="range" name="entryminimumdistance" class="singleslider" data-track-theme="a" data-theme="b" min="5" max="50" value="12" step="0.01">
      </div>

      <div class="ui-field-contain">
        <label>Minimum Premium:</label>
        <input type="range" name="entryminimumpremium" class="singleslider" data-track-theme="a" data-theme="b" min="0.05" max="1" value="0.25" step="0.01">
      </div>

      <label>
        <input type="checkbox" name="entryminimumpremiumtrigger" checked>Enable Minimum Premium Criteria</label>

      <div class="ui-field-contain">
        <label>
          Minimum Target Profit (%):</label>
        <input type="range" name="entryminimumprofit" class="singleslider" data-track-theme="a" data-theme="b" min="1" max="10" value="2" step="0.25">
      </div>

      <label>
        <input type="checkbox" name="entryminimumprofittrigger">Enable Minimum Profit Criteria</label>

      <div class="ui-field-contain">
        <label>Minimum Short Leg Volume:</label>
        <input type="range" name="entryminimumshortlegvol" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="500" value="10" step="5">
      </div>

      <label>
        <input type="checkbox" name="entryminimumshortlegvoltrigger" checked>Enable Minimum Short Leg Volume</label>

      <div class="ui-field-contain">
        <label>Minimum Long Leg Volume:</label>
        <input type="range" name="entryminimumlonglegvol" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="1000" value="10" step="5">
      </div>

      <label>
        <input type="checkbox" name="entryminimumlonglegvoltrigger" checked>Enable Minimum Long Leg Volume</label>

    </div>

    <!--Exit Stop Loss Criteria:-->
    <h3 class="ui-bar ui-bar-a ui-corner-all">Exit Criteria</h3>
    <div class="ui-body ui-body-a ui-corner-all">
      <div class="ui-field-contain">
        <label>Minimum Short Leg Volume:</label>
        <input type="range" name="exitminimumshortlegvol" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="1000" value="10" step="5">
      </div>

      <label>
        <input type="checkbox" name="exitminimumshortlegvoltrigger" checked>Enable Minimum Short Leg Volume</label>

      <div class="ui-field-contain">
        <label>Minimum Long Leg Volume:</label>
        <input type="range" name="exitminimumlonglegvol" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="1000" value="10" step="5">
      </div>

      <label>
        <input type="checkbox" name="exitminimumlonglegvoltrigger" checked>Enable Minimum Long Leg Volume</label>

    </div>

    <!--Exit Stop Loss Criteria:-->
    <h3 class="ui-bar ui-bar-a ui-corner-all">Exit Stop Loss Criteria</h3>
    <div class="ui-body ui-body-a ui-corner-all">
      <div class="ui-field-contain">
        <label>Maximum Delta:</label>
        <input type="range" name="exitmaximumdelta" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="0.25" value="0.08" step="0.01">
      </div>

      <label>
        <input type="checkbox" name="exitmaximumdeltatrigger">Enable Maximum Delta</label>

      <div class="ui-field-contain">
        <label>Maximum Distance:</label>
        <input type="range" name="exitmaximumdistance" class="singleslider" data-track-theme="a" data-theme="b" min="10" max="100" value="25">
      </div>

      <label>
        <input type="checkbox" name="exitmaximumdistancetrigger">Enable Maximum Distance</label>

      <div class="ui-field-contain">
        <label>Stop Loss Multiplier:</label>
        <input type="range" name="exitstoplossmultiplier" class="singleslider" data-track-theme="a" data-theme="b" min="2" max="10" step="0.5" value="3">
      </div>

      <label>
        <input type="checkbox" name="exitstoplossmultipliertrigger" checked>Enable Stop Loss Multiplier</label>
    </div>

    <!--Exit Early Criteria:-->
    <h3 class="ui-bar ui-bar-a ui-corner-all">Exit Early Criteria</h3>
    <div class="ui-body ui-body-a ui-corner-all">
      <div class="ui-field-contain">
        <label>Acceptable Premium To Leave Behind:</label>
        <input type="range" name="earlyexitpremiumloss" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="0.1" value="0.05" step="0.01">
      </div>

      <label>
        <input type="checkbox" name="earlyexitpremiumlosstrigger">Enable Premium To Leave Behind</label>

      <div class="ui-field-contain">
        <label>Acceptable Profit To Leave Behind (%):</label>
        <input type="range" name="earlyexitprofitloss" class="singleslider" data-track-theme="a" data-theme="b" min="0" max="1.0" value="0.5" step="0.1">
      </div>

      <label>
        <input type="checkbox" name="earlyexitprofitlosstrigger">Enable Profit to Leave Behind</label>

      <div class="ui-field-contain">
        <label><span class="dropt" title="Close early if at least this many days left">
Minimum Days Remaining:</span></label>
        <input type="range" name="earlyexitminimumdays" class="singleslider" data-track-theme="a" data-theme="b" min="1" max="10" value="5" step="0.1">
      </div>

      <label>
        <input type="checkbox" name="earlyexitminimumdaystrigger">Enable Minimum Days Remaining</label>
    </div>

    <div class="ui-grid-a ui-responsive">
      <div class="ui-block-a">
        <input type="reset" value="Reset">
      </div>
      <div class="ui-block-b">
        <input type="submit" name="submit" value="Submit">
      </div>
    </div>

  </div>
</div>

页面提交至:strategyreview.php

<?php

  $symbol="";
  $delta=0.08;
  $distance=12;
  $premium=0.25;
  $daysToExpiration=35;
  $spread=15;
  $mininterest = 20; 
  $monthly = "yes";
  $monthlyCheck = "checked";
  $menuCheck = "checked";
  $minvolume=0;

  if(isset($_POST['update'])){
    echo "Set values.";
  } else {
    echo "No values set.";
  }

  echo "words words strat review";

      $strategyname = $_POST['strategyname'];
      $symbols = $_POST['symbols']; 
      $spreadtype = $_POST['spreadtype'];
      $expirationdistancelow = $_POST['expirationdistancelow'];
      $expirationdistancehigh = $_POST['expirationdistancehigh'];
      $includeweeklyexpirations = $_POST['includeweeklyexpirations'];
      $entrymaximumdelta = $_POST['entrymaximumdelta'];
      $spreadwidthlow = $_POST['spreadwidthlow'];
      $spreadwidthhigh = $_POST['spreadwidthhigh'];
      $entryminimumdistance = $_POST['entryminimumdistance'];
      $entryminimumpremium = $_POST['entryminimumpremium'];
      $entryminimumpremiumtrigger = $_POST['entryminimumpremiumtrigger'];
      $entryminimumprofit = $_POST['entryminimumprofit'];
      $entryminimumprofittrigger = $_POST['entryminimumprofittrigger'];
      $entryminimumshortlegvol = $_POST['entryminimumshortlegvol'];
      $entryminimumshortlegvoltrigger = $_POST['entryminimumshortlegvoltrigger'];
      $entryminimumlonglegvol = $_POST['entryminimumlonglegvol'];
      $entryminimumlonglegvoltrigger = $_POST['entryminimumlonglegvoltrigger'];
      $exitminimumshortlegvol = $_POST['exitminimumshortlegvol'];
      $exitminimumshortlegvoltrigger = $_POST['exitminimumshortlegvoltrigger'];
      $exitminimumlonglegvol = $_POST['exitminimumlonglegvol'];
      $exitminimumlonglegvoltrigger = $_POST['exitminimumlonglegvoltrigger'];
      $exitmaximumdelta = $_POST['exitmaximumdelta'];
      $exitmaximumdeltatrigger = $_POST['exitmaximumdeltatrigger'];
      $exitmaximumdistance = $_POST['exitmaximumdistance'];
      $exitmaximumdistancetrigger = $_POST['exitmaximumdistancetrigger'];
      $exitstoplossmultiplier = $_POST['exitstoplossmultiplier'];
      $exitstoplossmultipliertrigger = $_POST['exitstoplossmultipliertrigger'];
      $earlyexitpremiumloss = $_POST['earlyexitpremiumloss'];
      $earlyexitpremiumlosstrigger = $_POST['earlyexitpremiumlosstrigger'];
      $earlyexitprofitloss = $_POST['earlyexitprofitloss'];
      $earlyexitprofitlosstrigger = $_POST['earlyexitprofitlosstrigger'];
      $earlyexitminimumdays = $_POST['earlyexitminimumdays'];
      $earlyexitminimumdaystrigger = $_POST['earlyexitminimumdaystrigger'];

    echo "$strategyname<br>";


?>

Answer 1

由于 jQuery Mobile handles form submits 的方式，该表单似乎无法正常工作。尽管 URL 等不同，但页面实际上并未更改。

在表单标签中添加data-ajax="false"，以防止 jQuery mobile 通过 AJAX 处理表单提交。