4

いくつかのパラメーターを使用してフォーム送信 (POST) を実行しようとしていますが、データテーブルに入力したいパラメーターに基づいています。しかし、私は Javascript (私の言語は Java) があまり得意ではないので、Ajax 呼び出しでそれをやろうとしています。しかし、それは私にはうまくいきません。サーブレットへのパラメーターを使用して POST を実行することを除いて、すべてがうまくいきます。データテーブルは常に自動的に入力されますが、フォームの送信後に入力する必要があります。

誰かが私のケースの例を知っていますか? ここでフォームの投稿とチュートリアルをたくさん読みましたが、このケース (?) はありません。

私のコードは次のようになりました。これは私にとってはうまくいきます。このテーブルで並べ替えや検索を行うことはできません。何が欠けている？

ありがとうございました。

<script type="text/javascript" language="javascript" src="/global/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript" src="/global/js/jquery.dataTables.min.js"></script>

<form name="myform" id="myform" action="" method="POST">  
  <label for="season">Season:</label>  
  <input type="text" name="season" id="season" value=""/> <br />
  <label for="type">Type:</label>  
  <input type="text" name="type" id="type" value=""/> <br/>
  <input type="button" id="btnSubmit" name="btnSubmit" value="Search"> 
</form>

<table class="display" id="example">
  <thead>
    <tr>
      <th>Name</th>
      <th>NationId</th>
      <th>RegionId</th>
      <th>Attendance</th>
    </tr>
  </thead>
  <tbody>
    <!-- data goes here -->
  </tbody>
</table>

<script>
  $("#btnSubmit").click( function() {
    var formData = "season=" + $("input#season").val() + "&type=" + $("input#type").val();
    $('#example').dataTable( {
      "bJQueryUI": true,
      "bProcessing": true,
      "bDestroy": true,
      "sAjaxSource": "/servlets/service/competitions/",
      "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
        oSettings.jqXHR = ${esc.d}.ajax( {
          "dataType": 'json',
          "type": "POST",
          "url": sSource,
          "data": formData,
          "success": fnCallback
          } );
      }
    } );
  } );
</script>
4

3 に答える 3

12

わかりました、これはあなたの質問に対する完全な答えです

3 つのイベントを作成する必要があります。1 つ目はデータベース情報をデータテーブルにロードし、2 つ目はデータベースに新しい情報を挿入し、3 つ目はデータテーブルのコンテンツを更新します。

<html>
<head>
<script type="text/javascript" language="javascript" src="/global/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" language="javascript" src="/global/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
//Global variables 
var otable;
var dataTab;
$(document).ready(function () {
    chargeData();
    $('#btnSubmit').click(function () {
       insertData();
    });   
}); 

// 1. charge all data 
function chargeData() {
    $.ajax({
        type: "POST",
        //create a method for search the data and show in datatable
        url: "/servlets/service/competitions/",
        contentType: "application/json; charset=utf-8",
        data: '{ }',
        dataType: "json",
        success: AjaxGetFieldDataSucceeded,
        error: AjaxGetFieldDataFailed
    });
}

function AjaxGetFieldDataSucceeded(result) {
    if (result != "[]") {

        dataTab = $.parseJSON(result);
        //instance of datatable
        oTable = $('#example').dataTable({
            "bProcessing": true,
            "aaData": dataTab,
            //important  -- headers of the json
            "aoColumns": [{ "mDataProp": "season" }, { "mDataProp": "type" }],
            "sPaginationType": "full_numbers",
            "aaSorting": [[0, "asc"]],
            "bJQueryUI": true,

        });

    }
}

function AjaxGetFieldDataFailed(result) {
    alert(result.status + ' ' + result.statusText);
}

// 2. this function only insert the data in your database
function insertData() {
    var email = $("#season").val();
    var evento = $("#type").val();
    $.ajax({
        type: "POST",
        //in this method insert the data in your database
        url: "/servlets/service/competitions/",
        contentType: "application/json; charset=utf-8",
        data: '{ season : "' + season + '", type : "' + type + '"}',
        dataType: "json",
        success: AjaxUpdateDataSucceeded,
        error: AjaxUpdateDataFailed
    });
}

function AjaxUpdateDataSucceeded(result) {
    if (result != "[]") {
        alert("update ok");
        refreshDatatable();
    }
}

function AjaxUpdateDataFailed(result) {
    alert(result.status + ' ' + result.statusText);
}

// 3. This function refresh only the datatable not all page  in varius events you can call like INSERT,UPDATE,DELETE ;D
function refreshDatatable() {
    $.ajax({
        type: "POST",
        //same event used in chargeData function
        url: "/servlets/service/competitions/",
        contentType: "application/json; charset=utf-8",
        data: '{ }',
        dataType: "json",
        success: AjaxRefreshDataSucceeded,
        error: AjaxRefreshDataFailed
    });
}

function AjaxRefreshDataSucceeded(result) {
    if (result.d != "[]") {
        var jposts = result;
        dataTab = $.parseJSON(jposts);
        //when the instance of datatable exists, only pass the data :D
        oTable.fnClearTable();
        oTable.fnAddData(dataTab);
    }
}

function AjaxRefreshDataFailed(result) {
    alert(result.status + ' ' + result.statusText);
}

<script>
</head>
<body>
<form name="myform" id="myform" action="">  
  <label for="season">Season:</label>  
  <input type="text" name="season" id="season" value=""/> <br />
  <label for="type">Type:</label>  
  <input type="text" name="type" id="type" value=""/> <br/>
  <input type="button" id="btnSubmit" name="btnSubmit" value="Search"> 
</form>

<table class="display" id="example">
  <thead>
    <tr>
      <th>SEASON</th>
      <th>TYPE</th>
    </tr>
  </thead>
  <tbody>
    <!-- data goes here -->
  </tbody>
</table>
</body>
</html>
于 2013-04-11T21:40:58.103 に答える
0

私はあなたと同じ機能を持っています。物事へのアプローチ方法は少し異なります。

私がやること ...

<input type="text" id="searchCondition"/>

<div id="container">
  <div id="ajaxDataTable"></div> 
</div>

document.ready で ajax 関数を呼び出して、サーブレットに searchCondition の値を渡すデータテーブルを取得します。結果 (THIS IS JUST THE TABLE) は ajaxDataTable div に入れられます。ajax コマンドが成功したら、データテーブルで通常の初期化を行います。

どの検索でも、同じ ajax コマンドを呼び出して、検索条件を再度渡します。

私にとってはうまくいきます！

于 2013-04-12T08:52:38.117 に答える
0

ここで、データは ajax 関数で string(formData) として渡され、デフォルトで ajax は json オブジェクトを想定しています。データを文字列で渡すには、2 つの方法があります

1) 生成されたクエリ文字列を URL に追加します

     oSettings.jqXHR = ${esc.d}.ajax( {
           "dataType": 'json',
           "type": "POST",
           "url": sSource + "?" + formData, /*  here url need be proper, as url can have some query string params in that case it shoukd be join with "&" not "?" */
           /* "data": formData, no need to have data config then */
           "success": fnCallback,
           "processData": false
          } );

2) データがすでに文字列にシリアライズされている場合、ajax で processData フラグを false に設定します。

oSettings.jqXHR = ${esc.d}.ajax( {
          "dataType": 'json',
          "type": "POST",
          "url": sSource,
          "data": formData,
          "success": fnCallback,
          "processData": false
          } );
于 2013-04-10T19:36:04.717 に答える