Question

我遇到了使用ajax传递给数据的单选按钮值的问题。请帮我确定我遇到的问题。这是我的代码：

HTML AJAX

<form method="post" id="upload_form">  
   <input type="radio" id="kindOfFile" name="kindOfFile" value="download" checked />Download
   <input type="radio" id="kindOfFile" name="kindOfFile" value="upload"/>Upload
   <input type="submit" class="btn btn-info btn-lg">Upload Files</button>                     
</form>                 
<div id="val"></div>

<script>  
 $(document).ready(function(){   
      $('#upload_form').on('submit', function(e){  
        e.preventDefault();  
        //var formData = new FormData(this);
        var radioVal = $('input[type="radio"]:checked').val(); 

        $.ajax({  
            url :"processUpload.php",  
            method:"POST",
            data: { 'kindOfFile' : radioVal },  
            contentType:false,  
            processData:false,  
            success:function(data){  
                alert(data);
                $("#val").html(data);
            }  
        });
        return false;
      });  
 });  
 </script>

PHP：

$kindOfFile     = isset($_POST['kindOfFile']) ? $_POST['kindOfFile']: '';
print_r($kindOfFile); die();

Answer 1

为您的所有无线电输入添加课程名称：

 <input type="radio" class="radioInputsClass" id="kindOfFile" name="kindOfFile" value="download" checked />Download
<input type="radio" class="radioInputsClass" id="kindOfFile" name="kindOfFile" value="upload"/>Upload

并使用以下方法获取所选无线电输入的值：

var radioVal = $(".radioInputsClass:checked").val();

更新：

然后，将您的AJAX中的数据更改为：

data: JSON.stringify({'kindOfFile' : radioVal})

并添加：

dataType: "json",
contentType: 'application/json'

到你的ajax电话

最后，在你的php中得到这样的值：

$data = $_POST['data'];
$arr = json_decode($data, true);

然后您可以访问以下值：

print_r($arr['kindOfFile']); die();

Answer 2

如果将contentType和processData设置为false，则必须使用FormData see documentation。如果要设置发送方法，method不属于ajax type

<script>  
 $(document).ready(function(){   
      $('#upload_form').on('submit', function(e){  
        e.preventDefault();  
        var formData = new FormData($(this)[0]);

        $.ajax({  
            url :"processUpload.php",  
            type:"POST",
            data: formData,  
            contentType:false,  
            processData:false,  
            success:function(data){  
                alert(data);
                $("#val").html(data);
            }  
        });
        return false;
      });  
 });  
 </script>

Answer 3

@Janine Laude他们在jquery中从<form>获取数据的方法不同，这里解释的很少。

首先，您在radio button内使用<form>。以下是发送数据的不同方法。

HTML code：

<div class="container">
    <form method="post" id="upload_form">  
       <input type="radio" id="kindOfFile" name="kindOfFile" value="download" checked />Download
       <input type="radio" id="kindOfFile" name="kindOfFile" value="upload"/>Upload
       <input type="submit" class="btn btn-info btn-lg">Upload Files</button>                     
    </form>                 
    <div id="val"></div>
</div>

PHP代码：

    <?php
    $kindOfFile = $_POST['kindOfFile'];

    //YOU CAN CREAT A ARRAY AND SEND THORUGH JSON
    $Arr = array(
        'data'=>$kindOfFile,
    );

    //YOU CAN SEND THORUGH ARRAY
    // OR
    // YOU CAN JUST echo json_encode($kindOfFile);
    echo json_encode($Arr); //THIS IS PREFERED WHEN ARRAY WITH MORE INDEX TO BE SENT BACK
?>

JQUERY SCRIPT发送数据FORM-DATA并收到JSON

 <script>  
 $(document).ready(function(){   
      $('#upload_form').on('submit', function(e){  
        e.preventDefault();  
        var formData = new FormData(this);

        $.ajax({  
            url :"processUpload.php",  
            method:"POST",
            data: formData,  
            contentType:false,  
            processData:false,  
            success:function(res){  
                var result = JSON.parse(res);
                //console.log(result.data);
                $("#val").html(result.data);
            }   
        });
        return false;
      });  
 });  
 </script>

JQUERY SCRIPT发送数据serialize()并收到JSON

$('#upload_form').on('submit', function(e){  
    e.preventDefault();  
    var formSerialize = $(this).serialize();
    alert(formSerialize);
    $.ajax({  
        url :"processUpload.php",  
        method:"POST",
        data: formSerialize,   
        success:function(res){  
            var result = JSON.parse(res);
            //console.log(result.data);
            $("#val").html(result.data);
        }   
    });
    return false;
  });

单选按钮IN ajax php的未定义索引值

3 个答案: