JS / Ajax刷新PHP包含在表单提交中的div内

时间:2014-01-03 21:37:39

标签: javascript php jquery mysql ajax

我有2个php页面:

reviewtickets.phpreviewtickets_history.php

reviewtickets.php我有:

<div class="tabcontent" id="ticket_history-1">
<?php include("reviewtickets_history.php?seq=".$_GET["seq"]."&type=history");?>
</div>

然后reviewtickets_history.php对其上的MySQL数据库和HTML表单进行选择查询。

我希望能够在提交表单时重新加载reviewtickets_history.php包含但不刷新整个reviewtickets.php页面

更新:

我的PHP回应形式:

echo '<form method="post" action="reviewtickets_history.php?seq='.$_GET["seq"].'&type='.$_GET["type"].'" id="ticket_update" enctype="multipart/form-data">
        <table width="100%" border="0" cellspacing="5" cellpadding="5">
        <tr>
            <td colspan="4" bgcolor="#666666"><font color="#FFFFFF"><strong>Record History / Make Progress</strong></font></td>
        </tr>
        <tr>
            <td width="17%"><strong>Internal Message?</strong></td>
            <td width="15%"><select name="internal_message" id="internal_message">
            <option value="yes">Yes</option>
            <option value="no" selected="selected">No</option>
            </select></td>
            <td width="10%"><strong>For Agent</strong></td>
            <td width="58%">'.$internal_message_agent_list.'</td>
        </tr>
        <tr>
            <td colspan="4"><textarea name="ticket_update" id="ticket_update" style="width:100%; height:160px;"></textarea></td>
        </tr>
        <tr>
            <td colspan="4"><strong>File(s):</strong> <input type="file" name="ticket_update_files[]" multiple="multiple" /></td>
        </tr>
        <tr>
            <td colspan="4"><strong>Time Start:</strong>
            <input name="timestart_date" type="text" value="'.date("Y-m-d").'" onClick="ds_sh(this);" readonly size="15" maxlength="50" />
            <input type="text" name="timestart_time" size="10" value="'.date("H:i:s").'" />
            <strong>Time End:</strong>
            <input name="timeend_date" type="text" value="'.date("Y-m-d").'" onClick="ds_sh(this);" readonly size="15" maxlength="50" />
            <input type="text" name="timeend_time" size="10" value="'.date("H:i:s").'" /></td>
        </tr>
        <tr>
            <td colspan="4"><input type="checkbox" name="send_ticket_update_email" value="Y" checked="checked" /> If this box is checked an &quot;Ticket Update Email&quot; will be sent to the contacts</td>
        </tr>
        <tr>
            <td colspan="4" align="right">
            <input type="hidden" name="contact" id="contact" value="'.$ticket["contact"].'" />
            <input type="hidden" name="company" id="company" value="'.$ticket["company"].'" />
            <input type="hidden" name="ticketnumber" id="ticketnumber" value="'.$_GET["seq"].'" />
            <input type="submit" name="submit" id="submit" value="Save"></td>
        </tr>
        </table>
        </form>';

2 个答案:

答案 0 :(得分:0)

通过AJAX提交表单,然后使用另一个AJAX调用刷新div。我使用示例表单发布,但它应该非常接近所需的内容。

HTML:

<form id='exampleForm' action='' method='post'>

    <label for='fieldOne'>Field One</label>:
    <input type='text' id='fieldOne'>

    <label for='fieldTwo'>Field One</label>:
    <input type='text' id='fieldTwo'>

    <!-- You should sanitize any user input.  Look into htmlspecialchars() -->
    <input type='hidden' id='seq' value='<?php echo $_GET['seq']; ?>'>
    <input type='hidden' id='type' value='<?php echo $_GET['type']; ?>'>

    <input type='submit' id='formSubmit' value='Submit'>
</form>

jQuery:

$(document).ready(function() {
    $("#formSubmit").click(function(e) {
      //Prevent the form from submitting, and taking you away from the page.
      e.preventDefault();

      // Using an example form to demonstrate the submit
      var fieldOne = $("#fieldOne").val(),
          fieldTwo = $("#fieldTwo").val(),
          seq = $("#seq").val(),
          type = $("#type").val();

      var theURL = "reviewtickets_history.php?seq="+seq+"&type="+type;

      var formData = "fieldOne="+fieldOne+"&fieldTwo="+fieldTwo;

        $.ajax({
          url : theURL,
          type: "POST",
          data : formData,
          /* Setting async to false makes sure the info is posted before refreshing the div */
          async:false,
          success: function(data, textStatus, jqXHR)
          {
            $("#ticket_history-1").html(data);
          },
            error: function (jqXHR, textStatus, errorThrown)
          {
            $("#ticket_history-1").html("Something bad happened"); 
          }
      });

      //ajax call to refresh the div
      $.ajax({
        url : theURL,
        type: "GET",
        success: function(data, textStatus, jqXHR)
        {
          $("#ticket_history-1").html(data);
        },
        error: function (jqXHR, textStatus, errorThrown)
        {
          $("#ticket_history-1").html("Something bad happened"); 
        }
      });
    });
});

附注:第一篇文章应该使用async:false完成,以确保在刷新div之前已过帐表单。

答案 1 :(得分:-1)

这不是包括作品的方式。它在服务器端是本地的,您不必附加查询参数。 Include包含将包含的文件的路径,并且包含的​​源将可以访问全局变量。

参考:http://cz1.php.net/manual/en/function.include.php