使用JavaScript / AJAX將行插入數據庫

Question

我有一個可以單擊的按鈕，將彈出一個帶有一個文本字段的彈出框。 每當我輸入內容並單擊“添加”時，我都希望將其插入數據庫中。

當前，當我單擊“添加”時，它將插入數據庫中，但不會讀取輸入的值。 因此，只需輸入一個空值。 我沒有看到任何錯誤，但是在我的JavaScript中，我做了console.log(type + " : " + value); 並在日志中返回sku_group-0 : 我也做了console.log(dict) ，日志中的輸出是Object {}所以看起來好像沒有記錄輸入的值。 我也在日志中也獲得了成功的row inserted消息，因此，我絕對認為這只是能夠讀取值的問題。

所以我的問題是如何獲取它以讀取值並將其成功輸入數據庫。

添加按鈕的HTML：

<button class="create-user" id="insertButton">Add Group</button>

彈出框的HTML：

<div id="dialog-form" title="Add Group">
  <p class="validateTips">Please Add a Group</p>

<!-- Dialog box displayed after add row button is clicked -->
  <form>
    <fieldset>        

      <label for="sku_group">SKU Group</label>
      <input type="text" name="group" id="group" class="text ui-widget-content ui-corner-all">


      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

JavaScript：

$( function() {   

    var dialog, form,

      sku_group = $( "#group" ),
      allFields = $( [] ).add( sku_group ),
      tips = $( ".validateTips" );
  console.log(allFields);

    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }

    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }


   function addGroup() {

      var valid = true;
      allFields.removeClass( "ui-state-error" );
// ----- Validation for each input in add row dialog box -----
      valid = valid && checkRegexp( sku_group, /^[a-z]([0-9a-z_\s])+$/i, "Please enter a valid SKU Group name" );
      console.log(allFields);
      if ( valid ) {
        var $tr = $( "#skuTable tbody tr td" ).eq(0).clone();
        var dict = {};
        var errors = "";
        $tr.each(function(){
        var type = $(this).attr('id');
        var value = $(this).html();
        console.log(type + " : " + value);

      switch (type) {
        case "group":
            dict["SKU Group"] = value;
        break;
        }
    });
        $( "#skuTable tbody" ).append($tr);
        dialog.dialog( "close" );
        console.log(dict);


        var request = $.ajax({
          type: "POST",
          url: "insert-group.php",
          data: dict
        });

        request.done(function (response, textStatus, jqXHR){
          if(JSON.parse(response) == true){
            console.log("row inserted");
          } else {
            console.log("row failed to insert");
            console.log(response);
          }
        });

        // Callback handler that will be called on failure
        request.fail(function (jqXHR, textStatus, errorThrown){
            console.error(
                "The following error occurred: "+
                textStatus, errorThrown
            );
        });

        // Callback handler that will be called regardless
        // if the request failed or succeeded
        request.always(function () {

        });

}

      return valid;
    }

    var dialog = $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
        "Add Group": addGroup,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
      }
    });

    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addGroup();
    });

    $( ".create-user" ).button().on( "click", function() {
      dialog.dialog({
          show: 'blind',
          hide: 'blind'
      });
      dialog.dialog("open");
    });

  });

insert-group.php腳本：

<?php

  $SKU_Group = $_POST['SKU Group'];

  $host="xxxxxxxxxxx"; 
  $dbName="xxxxxxx"; 
  $dbUser="xxxx"; 
  $dbPass="xxxxxxxxxxxxxx";

  $pdo = new PDO("sqlsrv:server=".$host.";Database=".$dbName, $dbUser, $dbPass);

  $sql = "INSERT INTO SKU_Group_Dim ([SKU Group]) VALUES (?)";

  $stmt = $pdo->prepare($sql);
  $result = $stmt->execute(array($SKU_Group));
  echo json_encode($result);

?>

Answer 1

修改語句

sku_group = $( "#group" )

與

sku_group = $( "#group" ).val();

這應該可以解決您的問題。

編輯以將TxtValue保存到數據庫中...

 $(function () {
        var TxtValue = $("#group").val();

        $("#submit").click(function (e) {

                e.preventDefault();
            if(!TxtValue){
                $.ajax({
                    type: "POST",
                    url: "insert-group.php",
                    data: {[agrumentName]: TxtValue},
                    success: function(e){
                        console.log(e);
                        console.log("Row Insrerted");
                    }
                });
            }
            else{
                console.log("Cannot Insert Null Value");
            }
        })
    })

將[agrumentName]替換為服務器函數參數。

希望這可以幫助 ：）