Question

我有一个名为index.php的页面，在这个页面上我有一个表单，它接受一个数字并通过ajax处理表单并在同一页面上返回结果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Ordertrack</title>
    <link rel='stylesheet' type='text/css' href='css/style.css' />
    <link rel='stylesheet' type='text/css' href='css/print.css' media="print" />
</head>
<body>
    <form action="processing.php" id="submitsearch" method="post">
    <input type="text" name="ordernum" value="">
    <input type="submit" />
  </form>
<div id="searchresults"></div>
<script src="js/jquery.js"></script>
<script src="js/example.js"></script>
</body>
</html>

正如您所看到的那样，我正在index.php中链接我的css和js，当我提交表单时，有一些东西在jquery中没有工作，因为它改为processing.php所以我更改了点击onclick然后我想检查一些事情，比如一个类delete的链接存在，但是没有用。然后我将脚本添加到processing.php。现在我需要知道这是好还是坏。我应该在processing.php中链接我的js和css文件吗？

这是ajax电话

$(document).ready(function(){
    $('#submitsearch').submit(function() { 
        $.ajax({ 
            data: $(this).serialize(), 
            type: $(this).attr('method'), 
            url: $(this).attr('action'),
            success: function(response) { 
                $('#searchresults').html(response);
                $('#submitsearch').hide();
            }
        });
        return false;
    });
});

这是我的processing.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Ordertrack</title>
  <link rel="stylesheet" href="">
</head>
<body>
      <div id="page-wrap">

    <div style="clear:both"></div>

    <div id="customer">

    </div>
    <div class="border-rtlt"></div>

    <div class="border-rtlt"></div>
    <table id="items">

      <tr>
          <th>Products</th>
          <th>SKU</th>
          <th>Price</th>
          <th>Qty</th>
          <th>Discount</th>
          <th>Subtotal</th>
      </tr>
      <tr class="item-row">
          <td class="description"><div class="delete-wpr"><textarea>data</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
          <td><textarea>data</textarea></td>
          <td><textarea class="cost">data</textarea></td>
          <td><textarea class="qty">data</textarea></td>
          <td><span>data</span></td>
          <td><span class="price">data</span></td>
      </tr>
      <tr id="hiderow">
        <td colspan="6"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
      </tr>

      <tr>
          <td colspan="3" class="blank"> </td>
          <td colspan="2" class="total-line">Subtotal</td>
          <td class="total-value"><div id="subtotal">data</div></td>
      </tr>
      <tr>

          <td colspan="3" class="blank"> </td>
          <td colspan="2" class="total-line">Total</td>
          <td class="total-value"><div id="total">data</div></td>
      </tr>

    </table>

  </div>
  <script>
     if ($(".item-row").length == 1) {
      $("a.delete").hide();
    };
  </script>
</body>
</html>

Answer 1

您的按钮

 <input type="submit" id='btnSubmit'/>

您只需要阻止按钮的默认行为

$( "#btnSubmit'" ).click(function( event ) {
event.preventDefault();
 $.ajax({ 
        data: $( "#submitsearch'").serialize(), 
        type: $("#submitsearch'").attr('method'), 
        url: $("#submitsearch'").attr('action'),
        success: function(response) { 
            $('#searchresults').html(response);
            $('#submitsearch').hide();
        }
    });
    return false;
});

链接由ajax加载的页面上的脚本的好习惯

1 个答案: