Question

我试图在div中显示AJAX响应。

如果我使用“提交”按钮，它会起作用，如果我将图像用作按钮，它就不起作用。

Here is the working Example of the problem

它似乎应该工作，因为它在代码中遇到相同的行并带回数据。我已经花了大约8个小时没有运气。任何帮助将不胜感激。

这是代码：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #editForm-1 input{float:left; margin:0 5px; padding:5px; border:1px solid red;  }
            #editForm-1 .imgSubmit {margin:0; padding:0 10px; border:none;}
        </style>
        <script type="text/javascript" src="javascripts/jquery-1.12.0.min.js"></script>

        <script type="text/javascript">
            function performAjaxSubmission(formID) {
                var URL = "http://310it.com/test/updateDB-basic.php";
                var formData = $("#editForm-" + formID).serialize();
                $.post(URL , formData, function(theResponse){
                    alert("Data: " + theResponse + "\nStatus: " + status);
                    $("#contentRight").html(theResponse);
                    //  $("#contentRight").text(theResponse);                               //  This WORKS
                    //  document.getElementById("contentRight") = theResponse;              //  This does not work
                    //  document.getElementById("contentRight").innerHTML(theResponse);     //  This does not work
                });                                                              
            }                                 
        </script>
    </head>

    <body>
        <div id="contentRight">
            <p>AJAX Response will be displayed here.</p>
            <p>&nbsp;</p>
        </div><!-- endof contentRight -->

        <form id="editForm-1" name="editForm-1" method="post" action="">
            <input type="hidden" name="formID" id="formID" value="1">
            <input type="hidden" name="action" id="action" value="edit">
            <label for="editTestName">
                <input type="text" name="editTestName" id="editTestName" />
            </label>
            <input type='button' value='Submit form' title="Submit" onClick='performAjaxSubmission(1)'>
            <input type="image" src="/test/images/icon-update-02.png" class="imgSubmit" title="Submit" onClick='performAjaxSubmission(1)'>
        </form>

    </body>
</html>

PHP：

<?php 
/************************************
           updateDBbasic.php
************************************/

?><pre><?php
    print_r($_POST);
?></pre>

Answer 1

我建议使用带图像标签的按钮，而不是图像类型的输入;后者有点儿麻烦。

变化：

<input src="/test/images/icon-update-02.png" class="imgSubmit" title="Submit" onclick="performAjaxSubmission(1)" type="image">

要：

<button style="background-color: #fff" type="button" class="imgSubmit" title="Submit" onclick="performAjaxSubmission(1)">
    <img src="/test/images/icon-update-02.png">
</button>

享受（：

如果提交按钮是图像，则使用jQuery / AJAX提交的表单数据不会更新<div>内容

1 个答案: