如何使用Ajax从输入字段向php发送数据

时间:2019-03-16 11:11:17

标签: php jquery ajax

我目前有这个html:

<td>
   <input type="hidden" class="old_name" name="old_name" value="folder1/image.jpg" />                                       
   <input  type="text" class="new_name" name="new_name" value="" />
   <button type="submit" class="rename">Rename</button>
</td> 
<td>
   <input type="hidden" class="old_name" name="old_name" value="folder2/image.jpg" />                                       
   <input  type="text" class="new_name" name="new_name" value="" />
   <button type="submit" class="rename">Rename</button>
</td> 
<td>
   <input type="hidden" class="old_name" name="old_name" value="folder3/image.jpg" />                                       
   <input  type="text" class="new_name" name="new_name" value="" />
   <button type="submit" class="rename">Rename</button>
</td>

我的jquery ajax看起来像这样:

// AJAX for rename files        
    $(document).on('click' , '.rename' , function() {       
        var old_name = $(".old_name").val(); // getting old value from input 
        var new_name = $(".new_name").val(); //getting new value from input   

        $.ajax({  
            url:"",  
            method:"POST",  
            data:{ 
                    old_name:old_name , 
                    new_name:new_name  

                },  
            success:function(data){
                // here comes echo
            }  
       });  
    });

我的php:

  if( isset($_POST["old_name"]) && isset($_POST["new_name"]) )  {

 echo $_POST["old_name"];
 echo $_POST["new_name"];

第一个问题:单击“重命名第二个按钮”时,它会回显第一个按钮中的old_name。那么,当单击第二个“重命名”按钮时,如何捕获第二个值old_name

第二个问题:php无法回显$_POST["new_name"]

不使用表格怎么能做到这一点?

1 个答案:

答案 0 :(得分:1)

第一个问题解决方案 为不同的输入使用不同的名称(在您的情况下为不同的类名称)

<td>
   <input type="hidden" class="old_name1" name="old_name" value="folder1/image.jpg" />                                       
   <input  type="text" class="new_name1" name="new_name" value="" />
   <button type="submit" class="rename1">Rename</button>
</td> 
<td>
   <input type="hidden" class="old_name2" name="old_name" value="folder2/image.jpg" />                                       
   <input  type="text" class="new_name2" name="new_name" value="" />
   <button type="submit" class="rename2">Rename</button>
</td> 
<td>
   <input type="hidden" class="old_name3" name="old_name" value="folder3/image.jpg" />                                       
   <input  type="text" class="new_name3" name="new_name" value="" />
   <button type="submit" class="rename3">Rename</button>
</td>

新的js函数将会

$(document).on('click' , '.rename1' , function() {       
    var old_name = $(".old_name1").val(); // getting old value from input 
    var new_name = $(".new_name1").val(); //getting new value from input   

    $.ajax({  
        url:"",  
        method:"POST",  
        data:{ 
                old_name:old_name , 
                new_name:new_name  

            },  
        success:function(data){
            // here comes echo
        }  
   });  
});
$(document).on('click' , '.rename2' , function() {       
    var old_name = $(".old_name2").val(); // getting old value from input 
    var new_name = $(".new_name2").val(); //getting new value from input   

    $.ajax({  
        url:"",  
        method:"POST",  
        data:{ 
                old_name:old_name , 
                new_name:new_name  

            },  
        success:function(data){
            // here comes echo
        }  
   });  
});
$(document).on('click' , '.rename3' , function() {       
    var old_name = $(".old_name3").val(); // getting old value from input 
    var new_name = $(".new_name3").val(); //getting new value from input   

    $.ajax({  
        url:"",  
        method:"POST",  
        data:{ 
                old_name:old_name , 
                new_name:new_name  

            },  
        success:function(data){
            // here comes echo
        }  
   });  
});

第二个问题解决方案

您可能将该字段留空