Question

我在显示一些动态创建的数据时显示问题，并在ajax完成时显示提交的数据。

HTML - form.html

    <form name="myForm" id="myForm">
        <strong>Skills 1</strong>     
            <div>
                <select name="Skills[]" id="Skills">
                <optgroup label="Programming">
                   <option value="">-</option>
                   <option value="Javascript">Javascript</option>
                   <option value="C++">C++</option>
                   <option value="C#">C#</option>
                </optgroup>

                <optgroup label="Multimedia">
                   <option value="Adobe Flash MX">Adobe Flash MX</option>
                   <option value="Adobe Fireworks">Adobe Fireworks</option>
                   <option value="Adobe After Effects">Adobe After Effects</option>
                </optgroup>
                </select>
            </div>

            <div>
                <input type="text" name="SkillsNumber[]" id="SkillsNumber" placeholder="Number of year using" />
            </div>

            <div>
                <select name="SkillsGrade[]" id="SkillsGrade">
                  <option value="">Select your skills grade</option>
                  <option value="Noob">Noob</option>
                  <option value="Amateur">Amateur</option>
                  <option value="Professional">Professional</option>
                </select>
            </div>            
        </div>
    </form>
<div id="result-set"></div>

*此选择部分可以动态添加（最多为3）

的jQuery

$(function(){
$("#myForm").submit(function(){
    var formData = $(this).serializeArray();
    console.log(formData);

    $.ajax({
        type: "POST",
        data: {
            theData: formData
        },
        url: "theresult.php",
        success: function(result){
            $("#result-set").ajaxComplete(function() {
                   $("#result-set").html(result);
               });
        }   
    }); 
    return false;
});

PHP - theresult.php

<?php
   $data = $_POST['theData'];
   $enc = json_encode($data, true);

   ...
   ....
   .....
?>

问题是我应该怎么做，如果我有3个选择（所以我有3个技能，3个SkillsNumber和3个SkillsGrade）并在＃result-set上显示它。已经崩溃了。

抱歉英语不好。 Newb在这里...... :)

Answer 1

在表单上添加一个按钮，如

<input type="button" value="submit" id="myBtn">

像这样更改您的代码

$("#myBtn").submit(function(){

并像这样编写你的成功函数

success: function(result){                
     $("#result-set").html(result);
 }

如果你想使用json数据作为javascript对象设置你的$ .ajax方法参数，如dataType: 'json'

Answer 2

使用parse_str获取您的数据：

PHP - theresult.php

<?php
    parse_str($_POST['theData'], $params);
    $Skills = $params['Skills[]']; // I am not sure about [] part, test it
    $SkillsGrade = $params['SkillsGrade[]'];   
    $SkillsNumber = $params['SkillsNumber[]'];   

    echo "Skills: $Skills<br />";
    echo "SkillsGrade: $SkillsGrade<br />";
    echo "SkillsNumber: $SkillsNumber<br />";

    exit;
?>

并将dataType: "html"添加到$ .ajax（）定义

使用AJAX将表单数据提交到PHP

2 个答案: