Question

我用HTML生成了两个固定大小的列，然后尝试插入一个由AJAX / JSON / jsquery脚本创建的列，并包括其中的数据。在HTML列之间，脚本生成列之间有空间，我在脚本中包含了相同的样式代码。

列的HTML文件样式：

    .column {
      float: left;
      padding: 10px;
      min-height: 600px; 
      top: 190px;
      position:fixed;
    }

    .col1 {
      width: 200px; 
      left: 0px;    
    }
    .col2 {
      width: 100px; 
      left: 230px;
    }
    .col3 {
      width: 120px; 
      left: 350px;; /*keep checkboxes close to column 2 text boxes*/
    }

第1列的HTML代码：

    <div class="row">
        <div class="column col1"  style="background-color:#aaa;">
            <form method="POST" action="ReadFrmData.php">
                Value:  <input type="text" style = "width: 100px"name="sdata" 
    value=" "><br>
            <input type="radio" name="Set" value="SetPos1"> Set Pos1 <br> 
                <input type="radio" name="Set" value="SetPos2"> Set Pos2<br>
                <input type="submit" name="sendset" value="Send"><br>
        </form>
        </div>

第3列的HTML代码：

    <div class="column col3" style="background-color:#ccc;">
            <form method="POST" action="ReadFrmData.php">
                <h4>Request<br>Configuration</h4><br>
            <input type="checkbox" name="Req1" value="SetReq1"><br>
                <input type="checkbox" name="Req2" value="SetReq2"><br>
                <input type="submit" name="sendconfig" value="Send"><br>
        </form>
    </div>

第2列的AJAX / JSON / jsquery脚本：

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <!--Put the following in the <head>-->
    <script type="text/javascript">
    $("document").ready(function(){
    $(".js-ajax-php-json").submit(function(){
    var data = {"action": "test"};
    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "response.php", //Relative or absolute path to response.php file
        data: data,
        success: function(data) {
            $(".the-return").html("<div class='column col2' style='background-color:#bbb;position:fixed; width: 100px; left: 240px;'>"+
            "<h4>Data</h4>" +
            "<form><br><br>" +
            "<input type='text' style='height: 14px ; width: 100px' value= " + data['Pos1'] + "><br>" +
            "<input type='text' style='height: 14px; width: 100px' value = " + data['Pos2'] + "><br>" +
            "</form></div>"
            );
        }
      });
    return false;
    });
    });

我试图在HTML生成的列1和3之间插入脚本生成的列2，但是什么也没有发生。 HTML本身起作用，并且仅通过开始按钮进行测试时，脚本可以生成一列。

Answer 1

测试您的脚本是否通过alert();响应任何提交操作。我没有看到带有class属性".js-ajax-php-json"的任何提交按钮。 ".the-return"也在哪里？在该类的表中，我也看不到任何内容。

在表中，您应该指定一个div或要将ajax响应插入到其中的元素。例如：

HTML code for column #1:
<div class="row">
    <div class="column col1"  style="background-color:#aaa;">
        <form method="POST" action="ReadFrmData.php">
            Value:  <input type="text" style = "width: 100px"name="sdata" 
value=" "><br>
        <input type="radio" name="Set" value="SetPos1"> Set Pos1 <br> 
            <input type="radio" name="Set" value="SetPos2"> Set Pos2<br>
            <input type="submit" name="sendset" value="Send"><br>
    </form>
    </div>

<div id="column2">AJAX RESPONSE HERE</div>

HTML code for column #3:
<div class="column col3" style="background-color:#ccc;">
        <form method="POST" action="ReadFrmData.php">
            <h4>Request<br>Configuration</h4><br>
        <input type="checkbox" name="Req1" value="SetReq1"><br>
            <input type="checkbox" name="Req2" value="SetReq2"><br>
            <input type="submit" name="sendconfig" value="Send"><br>
    </form>
</div>
</div>

在您的AJAX调用中，指定ID column2以返回响应：

$.ajax({
    type: "POST",
    dataType: "json",
    url: "response.php", //Relative or absolute path to response.php file
    data: data,
    success: function(data) {
        $("#column2").html("<div class='column col2' style='background-color:#bbb;position:fixed; width: 100px; left: 240px;'>"+
        "<h4>Data</h4>" +
        "<form><br><br>" +
        "<input type='text' style='height: 14px ; width: 100px' value= " + data['Pos1'] + "><br>" +
        "<input type='text' style='height: 14px; width: 100px' value = " + data['Pos2'] + "><br>" +
        "</form></div>"
        );
    }
  });

Answer 2

我看不到“ .the-return”类的元素在哪里。您需要一个放置新html的地方。有很多方法可以使用jquery来实现。

无需完全重写代码，只需将html设置为变量，然后使用jquery insertAfter（）将其插入第一列之后。 See here for more info。

这应该有效。

var column2 = $("<div class='column col2' style='background-color:#bbb;position:fixed; width: 100px; left: 240px;'>" +
    "<h4>Data</h4>" +
    "<form><br><br>" +
    "<input type='text' style='height: 14px ; width: 100px' value= " + data['Pos1'] + "><br>" +
    "<input type='text' style='height: 14px; width: 100px' value = " + data['Pos2'] + "><br>" +
    "</form></div>");

column2.insertAfter('.col1');

将脚本生成的列插入HTML生成的列

2 个答案: