用jquery ajax將數據傳遞給服務器

我試圖將文本框的值添加到按鈕click.But的表中，但我不知道ajax.please檢查我的code.Is我的ajax部分正確嗎？誰能幫我？用jquery ajax將數據傳遞給服務器

var roleList=[{ 
"no"  :"1", 
"name":"xxx", 
"dlt"  :"Delete" 
}, 
{ 
"no"  :"2", 
"name":"yyy", 
"dlt"  :"Delete" 
} 
]; 

$(document).ready(function(){ 
     for(var i=0;i<roleList.length;i++) 
     { 
     var table='<tr><td>'+roleList[i].no+'</td><td>'+roleList[i].name+ 
     '</td><td><button class="btn dlt" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>'+roleList[i].dlt+'</button></td><tr>'; 
     $('#roleListTable').append(table) 
     } 

});

我嘗試這樣做：

if (name != null) { 
     $.post("",{empRoleList:roleList}, 
      function(data){ 
       if (data != 0) { 
           alert("success"); 
           $('#name').each(function() { 
            $(this).val(''); 
           }); 
            var ajxObj = { name: "Personal", id: 0 }; 
            $.ajax({ 
            type: 'POST', 
            url: "", 
            contentType: "application/json; charset=utf-8", 
            data: JSON.stringify(ajxObj), 
            dataType: 'html', 
            success: function (response) { 
             $('#roleListTable').html(response); 
             // $('#grdUser').show(); 
            }, 
            failure: function (response) { 
             alert(response.responseText); 
            } 
           }); 
          } 
          else { alert("Fail"); } 
         }); 
      }

https://jsfiddle.net/95gnnpL1/1/

來源

2017-02-15 user7397787

爲什麼你想使用Ajax的功能呢？ –

你應該只是閱讀一些文檔，它根本不難 –

你可以不用ajax來做到這一點。是否想要獲取數據表單數據庫？ –

This may solve your problem..check the link.. 


    <html> 
    <head> 
     <script> 
      var roleList=[{ 
       "no"  :"1", 
       "name":"xxx", 
       "dlt"  :"Delete" 
       }, 
       { 
       "no"  :"2", 
       "name":"yyy", 
       "dlt": "Delete" 
         } 
        ]; 
        $(document).ready(function() { 
         for (var i = 0; i < roleList.length; i++) { 
          var table = '<tr><td>' + roleList[i].no + '</td><td>' + roleList[i].name + 
            '</td><td><button class="btn dlt" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>' + roleList[i].dlt + '</button></td><tr>'; 
          $('#roleListTable').append(table) 
         } 
         $('#save').on('click', function (e) { 
          var table = '<tr><td>' + $("#name").val() + '</td><td>' + $("#description").val() + '</td><tr>'; 
          $('#roleListTable').append(table) 
         }); 
        }); 
     </script> 
    </head> 
    <body> 
     <div class="col-lg-12 col-md-12 col-xs-12 padding table-responsive"> 
      <table class="table"> 
       <thead class="roleListTableHead"> 
        <tr> 
         <td>no</td> 
         <td>emp id</td> 
        </tr> 
       </thead> 
       <tbody id="roleListTable"> 
       </tbody> 
      </table> 
     </div> 

     <div class="col-lg-12 col-md-12 col-xs-12 padding"> 
      <label class="col-lg-2 col-md-2 col-x-2"> Name</label> 
      <input type="text" name="name" id="name" class="col-lg-6 col-md-6 col-xs-12"> 
     </div> 

     <div class="col-lg-12 col-md-12 col-xs-12 padding"> 
      <label class="col-lg-2 col-md-2 col-x-2">Description</label> 
      <textarea type="text" name="description" id="description" class="col-lg-6 col-md-6 col-xs-12"></textarea> 
     </div> 

     <div class="col-lg-12 col-md-12 col-xs-12 padding pull"> 
      <span class="pull-right"> 
       <button class="btn save " id="save" data-toggle="modal" data-target="#save"><i class="fa fa-floppy-o"></i>Save 
       </button> 
       <button class="btn cancel "><i class="fa fa-ban"></i>Cancel</button> 
      </span> 
     </div> 
    </body> 
</html>

https://jsfiddle.net/95gnnpL1/8/

來源

2017-02-15 08:37:00

@Doppa Srinivas Thanks.But我想知道如何使用ajax來做到這一點。 – user7397787

@ user7397787請告訴我你的全部要求。我的意思是你想用ajax調用什麼。當你想提交一個jax請求。你的輸入是什麼以及你想從ajax響應什麼。然後你想用ajax響應。 –

@DoppaSrinivas我有一個表與json數據和文本框與保存按鈕，當我在一個文本框中輸入數據後點擊保存按鈕，值應該顯示在表中作爲下一行，我怎麼能寫阿賈克斯代碼 – user7397787

您可以添加文本框的值與按鈕表點擊這個樣子。

\t $(document).ready(function(){ 
 
\t \t $('#add').on('click',function(){ 
 
\t \t \t var name = $('#name').val(); //Getting the value of name field 
 
\t \t \t var description = $('#description').val(); //Getting the value of description field 
 

 
\t \t \t var tableData = ''; 
 

 
\t \t \t tableData += '<tr><td>'+name+'</td><td>'+description+'</td></tr>'; 
 

 
\t \t \t $('#tbody').append(tableData); 
 
\t \t }); 
 
\t });

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>jQuery Ajax</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <form> 
 
    <div class="form-group col-md-8"> 
 
     <label for="name">Name:</label> 
 
     <input type="text" class="form-control" id="name" placeholder="Enter name"> 
 
    </div> 
 
    <div class="form-group col-md-8"> 
 
     <label for="description">Description:</label> 
 
     <input type="text" class="form-control" id="description" placeholder="Enter description"> 
 
    </div> 
 
    <div class="col-md-8"> 
 
    \t <button type="button" id="add" class="btn btn-default">Add</button> 
 
    </div> 
 
    </form> 
 

 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Description</th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody id="tbody"> 
 

 
    </tbody> 
 
    </table> 
 

 

 
</div> 
 

 

 
</body> 
 
</html>

來源

2017-02-15 08:58:56

謝謝你能告訴我如何使用ajax做到這一點 – user7397787

var roleList=[{ 
 
"no"  :"1", 
 
"name":"xxx", 
 
"dlt"  :"Delete" 
 
}, 
 
{ 
 
"no"  :"2", 
 
"name":"yyy", 
 
"dlt"  :"Delete" 
 
} 
 
]; 
 

 
$(document).ready(function(){ 
 
\t for(var i=0;i<roleList.length;i++) 
 
\t { 
 
\t  \t var table='<tr><td>'+roleList[i].no+'</td><td>'+roleList[i].name+ 
 
\t  \t '</td><td><button class="btn dlt" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>'+roleList[i].dlt+'</button></td><tr>'; 
 
\t  \t $('#roleListTable').append(table) 
 
\t } 
 
    
 

 
\t \t function submit(){ 
 
\t \t \t \t var name = $(".name").val(); 
 
\t \t \t \t var ajxObj = { name: name , id: 0 }; 
 
\t \t \t \t $.ajax({ 
 
\t \t \t \t type: 'POST', 
 
\t \t \t \t url: "", 
 
\t \t \t \t contentType: "application/json; charset=utf-8", 
 
\t \t \t \t data: JSON.stringify(ajxObj), 
 
\t \t \t \t dataType: 'html', 
 
\t \t \t \t success: function (response) { 
 
\t \t \t \t $('#roleListTable').html(response); 
 
\t \t \t \t $('#rolesForm')[0].reset(); 
 
\t \t \t \t co(resonse) 
 
\t \t \t \t }, 
 
\t \t \t \t failure: function (response) { 
 
\t \t \t \t alert(response.responseText); 
 
\t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t }       
 
\t \t \t 
 
});

<div class="col-lg-12 col-md-12 col-xs-12 padding"> 
 
       <form action=" " method="post" id="rolesForm"> 
 
      \t <label class="col-lg-2 col-md-2 col-x-2"> Name</label> 
 
      \t <input type="text" name="name" id="name" class="col-lg-6 col-md-6 col-xs-12 name"> 
 
      \t </form> 
 
      </div> 
 

 
      <div class="col-lg-12 col-md-12 col-xs-12 padding"> 
 
      \t <label class="col-lg-2 col-md-2 col-x-2">Description</label> 
 
      \t <textarea type="text" name="description" id="description" class="col-lg-6 col-md-6 col-xs-12"></textarea> 
 
      </div> 
 

 
      <div class="col-lg-12 col-md-12 col-xs-12 padding pull"> 
 
       <span class="pull-right"> 
 
\t    \t <button class="btn save " id="save" onclick="submit"><i class="fa fa-floppy-o"></i>Save 
 
\t    \t </button> 
 
\t \t \t \t \t 
 
\t \t \t \t </span> 
 
      </div> 
 
\t

來源

2017-02-15 13:36:11 user7397787

var roleList=[{ 
 
"no"  :"1", 
 
"name":"xxx", 
 
"dlt"  :"Delete" 
 
}, 
 
{ 
 
"no"  :"2", 
 
"name":"yyy", 
 
"dlt"  :"Delete" 
 
} 
 
]; 
 

 
$(document).ready(function(){ 
 
\t for(var i=0;i<roleList.length;i++) 
 
\t { 
 
\t  \t var table='<tr><td>'+roleList[i].no+'</td><td>'+roleList[i].name+ 
 
\t  \t '</td><td><button class="btn dlt" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>'+roleList[i].dlt+'</button></td><tr>'; 
 
\t  \t $('#roleListTable').append(table) 
 
\t } 
 
    
 

 
\t \t function submit(){ 
 
\t \t \t \t var name = $(".name").val(); 
 
\t \t \t \t var ajxObj = { name: name , id: 0 }; 
 
\t \t \t \t $.ajax({ 
 
\t \t \t \t type: 'POST', 
 
\t \t \t \t url: "", 
 
\t \t \t \t contentType: "application/json; charset=utf-8", 
 
\t \t \t \t data: JSON.stringify(ajxObj), 
 
\t \t \t \t dataType: 'html', 
 
\t \t \t \t success: function (response) { 
 
\t \t \t \t $('#roleListTable').html(response); 
 
\t \t \t \t $('#rolesForm')[0].reset(); 
 
\t \t \t \t co(resonse) 
 
\t \t \t \t }, 
 
\t \t \t \t failure: function (response) { 
 
\t \t \t \t alert(response.responseText); 
 
\t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t }       
 
\t \t \t 
 
}); 
 

 
//get the data and populate in the table 
 
function getData(){ 
 

 
\t $.ajax({ 
 
\t \t \t url: '', 
 
\t \t \t type:'post' 
 
\t \t \t data: {}, 
 
\t \t \t dataType: "json", 
 
    \t \t  cache: false, 
 
\t \t \t success: function (jsonResponse) { 
 
\t \t \t $.each(jsonResponse, function (key, val) { 
 
\t \t \t var table='<tr><td>'+key+'</td><td>'+val+ 
 
\t  \t '</td><tr>'; 
 
\t  \t $('#roleListTable').append(table) 
 

 
\t \t \t }); 
 
\t \t \t } 
 
\t \t \t }); 
 
}

<div class="col-lg-12 col-md-12 col-xs-12 padding"> 
 
       <form action=" " method="post" id="rolesForm"> 
 
      \t <label class="col-lg-2 col-md-2 col-x-2"> Name</label> 
 
      \t <input type="text" name="name" id="name" class="col-lg-6 col-md-6 col-xs-12 name"> 
 
      \t </form> 
 
      </div> 
 

 
      <div class="col-lg-12 col-md-12 col-xs-12 padding"> 
 
      \t <label class="col-lg-2 col-md-2 col-x-2">Description</label> 
 
      \t <textarea type="text" name="description" id="description" class="col-lg-6 col-md-6 col-xs-12"></textarea> 
 
      </div> 
 

 
      <div class="col-lg-12 col-md-12 col-xs-12 padding pull"> 
 
       <span class="pull-right"> 
 
\t    \t <button class="btn save " id="save" onclick="submit"><i class="fa fa-floppy-o"></i>Save 
 
\t    \t </button> 
 
\t \t \t \t \t 
 
\t \t \t \t </span> 
 
      </div> 
 
\t

來源

2017-02-16 04:09:47

用jquery ajax將數據傳遞給服務器

回答

相關問題