Question

我需要将此表单发布到数据库并检索新添加的信息，而不使用XHR进行刷新。

页面加载了一些可以编辑的初始元素，并且可以通过按下按钮动态添加更多“新”元素（新用户需要这样做，因为他们没有预先存在的任务。它跟踪你是谁与session_id）。

我现在已经待了13个多小时了，有点累。

代码：

的index.php

<?php 
    //Sets unique session for the current visitor and keeps track of information for use with database
    $time = time();  
    $date = $today = date("Ymd");  
    $id = $time + $date;  

    $id = session_id();
    if(empty($id)) session_start();

    //echo "SID: ".SID."<br>session_id(): ".session_id()."<br>COOKIE: ".$_COOKIE["PHPSESSID"];


?>
<!doctype html>
<html>
    <head>
    <meta charset='utf-8'> 
    <title>Simple To-Do List</title>
    <?php
        // Create connection via my connect.php file
        require 'connect.php';

            // Create query
            $query= "select * from checklist where SID = '".session_id()."'"; 
            $result = mysql_query($query);

            // Create requisite array for checklist
            $checklistItems = array();

           //Check to ensure query won't implode and is valid
           if($result === FALSE) {
             die(mysql_error()); 
            }

             // Calculates number of rows from query  
            $num=mysql_numrows($result);

            mysql_close($con);

    ?>
        <!-- javascript code to dynamically add new form fields as well as check\uncheck all boxes -->
            <script src="//code.jquery.com/jquery-latest.min.js" language="javascript" type="text/javascript"></script>  
            <script src="addInput.js" language="Javascript" type="text/javascript"></script>



    </head>
    <body>   

        <h1>My To-Dos</h1>


     <form name="checklist" id="checklist" class="checklist">
        <?php // Loop through query results   
              while($row = mysql_fetch_array($result))
                  {
                  $entry = $row['Entry'];
                  $CID = $row['CID'];
                  $checked =$row['Checked'];
                 // echo $CID;
                  echo "<input type=\"text\" value=\"$entry\" name=\"textfield$CID;\" id=\"textfield$CID;\" onchange=\"showUser(this.value)\" />";
                  echo "<input type=\"checkbox\" name=\"checkbox$CID;\" id=\"checkbox$CID;\"  value=\"$checked\"".(($checked == '1')? ' checked="checked"' : '')."  />";
                  echo "<br>";
                  }
        ?> 
        <div id="dynamicInput"></div>
        <input type="submit" id="checklistSubmit" name="checklistSubmit" class="checklist-submit"> <input type="button" id="CompleteAll" name="CompleteAll" value="Check All" onclick="javascript:checkAll('checklist', true);"><input type="button" id="UncheckAll" name="UncheckAll" value="Uncheck All" onclick="javascript:checkAll('checklist', false);">                  
     <input type="button" value="Add another text input" onClick="addInput('dynamicInput');"></form>


    </body>
</html>

connect.php

<?php 

// Create connection
$con=mysql_connect("localhost","root","");
$selected = mysql_select_db("madmonk",$con); 

// Check connection
if (mysqli_connect_errno($con))
{
    echo "Failed to connect to MySQL: " . mysql_connect_error();
}

?>

addInput.js

// Creates new dynamic elements within HTML body
var counter = 0;
var limit = 8;

function addInput(divName){ 
     i=counter; i++;
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {

          var newdiv = document.createElement('div');
          newdiv.innerHTML = " <input type='text'name='myInputs["+i+"]'><input type='checkbox' name='myInputs["+i+"]'><br>";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
     }
}

//Checks\unchecks all checkboxes on the web page
function checkAll(formname, checktoggle)
    {
        var checkboxes = new Array(); 
        checkboxes = document[formname].getElementsByTagName('input');
        for (var i=0; i<checkboxes.length; i++)  {
        if (checkboxes[i].type == 'checkbox')   {
        checkboxes[i].checked = checktoggle;
          }
       }
    }


//AJAX code to communicate with server without page refresh
$('checklistSubmit').click(function(e) {
    $(e).stopPropagation();

    $.post({
        url: 'processor.php',
        data: $('#checklist').serialize(),
        dataType: 'html',
        success: function(data, status, jqXHR) {
           $('div.successmessage').html(data);
           //success callback function
           alert (success);
        }, 
        error: function() {
           //error callback function
           alert (failure);
        } 
    });
});

我知道一个事实我上面的AJAX代码有问题。这很关键，我不能让这个工作。我之前从未试图做过这样的事情，我决定尝试着把它放到它身上并完成它。啊。

processor.php

<?php
require 'connect.php';

$entry  = $_POST['entry'];
$checked = $_POST['checked'];


$num_items = count($entry);
for ($i = 0; $i < $num_items; $i++)
{
    $sql="INSERT INTO checklist (Entry, Checked, SID)
VALUES ($checked, $entry, session_id()) WHERE SID = '".session_id()."'";}


mysql_close($con);

?>

^这很粗糙，完全未完成。

如何与动态字段交互并将它们循环到管道通过mysql和php进入数据库？
如何使用新值更新index.php页面添加了刚刚添加的新项目？
如何让AJAX工作？

请为我而言非常具体。我使用AJAX非常非常新。

Answer 1

$('checklistSubmit')应为$('#checklistSubmit')。您需要#来查找ID。

此外，单击处理程序绑定应位于$(function() { ... });内，以便在将表单加载到DOM之前不会运行它。

您的成功函数包含$('div.successmessage').html(data);但我在PHP中没有看到该类的DIV。

$(e).stopPropagation();

应该是：

e.stopPropagation();

因为e不是DOM元素，所以它是一个事件。

Answer 2

1）要与动态字段进行互动，只需向其提供class="dynamicField"和myId = <whatever the id you care about is>之类的内容，然后添加

$(".dynamicField").change(function(){
  $.post("updateDB.php", 
    { 
      "dataToGoInDB": $(this).val(),
      "idYouCareAbout": $(this).attr("myId")
    },
    function(data){
      console.log(data.responseBackFromDB);
  }, "json");

});

然后有一个php页面updateDB.php，它将查看POST变量，正确地避免它们以避免SQL注入，然后对数据库执行任何操作。

如果您计划在创建DOM后添加动态字段，请改为使用以下方式：

$("document").on("change", ".dynamicField", function(){
  $.post("updateDB.php", 
    { 
      "dataToGoInDB": $(this).val(),
      "idYouCareAbout": $(this).attr("myId")
    },
    function(data){
      console.log(data.responseBackFromDB);
  }, "json");

});

这会将.change附加到.dynamicField的任何新实例。（http://api.jquery.com/on/）

2）要添加新字段，请尝试使用其中一个jQuery DOM操作方法，例如追加http://api.jquery.com/append/

3）看看我对＃1

的答案所说的话

希望有所帮助。

Answer 3

使用此... $.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });

点击此链接http://api.jquery.com/jQuery.post/

Answer 4

您可以采取以下方法来处理ajax： -

将ajax调用放入函数中。说initAjax（）。
在initMyForm（）

加载文档时执行此功能。

$(document).ready(function(){
   initAjax();
   initMyForm();
}

在成功或失败的回调中，ajax调用更新了表单的HTML而不是再次调用initMyForm（）;

示例代码

function initAjax(){
    $.ajax({
       url : 'myurl',
       success : function(data){
          playWithData(data);
       },
       failure : function(data){
       }
    });
}

function playWithData(data){
    //after playing with data
    initMyForm();
}

function initMyForm(){
}

console.log和谷歌浏览器的开发者工具（按F12）也是好朋友。您也可以为XHR请求设置断点。这也有助于您进行调试。

使用AJAX（无刷新）更新部分动态表单 - 无法使其正常工作

4 个答案: