如何使用ajax将动态创建的表单输入存储到数据库

时间:2011-03-07 19:59:18

标签: php jquery mysql

我问了一个类似的问题,但答案并没有真正帮助我解决或想出解决方案。

我的JS脚本上传了一个文件(使用PHP作为其回调),然后从upload.php中获取数据并使用下面的JS代码片段重新格式化,以向用户显示输入。

当数据呈现给用户时,它看起来就是一个例子:

input type="text" class="r" name="scene" value="1" />
<input type="text" class="r" name="int_ext" value="INT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="DAY" />

<input type="text" class="r" name="scene" value="2" />
<input type="text" class="r" name="int_ext" value="EXT" />
<input type="text" class="r" name="scene_desc" value="Outside" />
<input type="text" class="r" name="day_night" value="DAY" />

<input type="text" class="r" name="scene" value="3" />
<input type="text" class="r" name="int_ext" value="INT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="DAY" />

<input type="text" class="r" name="scene" value="4" />
<input type="text" class="r" name="int_ext" value="EXT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="NIGHT" />

...

此输出范围为100到400组输入。一组分为4个输入。

我正在尝试让每个动态集适合像这样的查询

mysql_query("INSERT INTO (`project_id`, `scene_number`, `int_ext`, `scene_description`, `day_night`) VALUES (10, '{$scene_num}', '{$int_ext}', '{$scene_desc}', '{$day_night}')");

在有人指出之前,在我的代码中,我在将输入插入数据库之前过滤并清理输入

我的问题是我无法创造性地将每个场景信息插入数据库,就像我设想的那样。

在我的PHP代码中,我回应了这一行:

if(!$word)
    return NULL;

if(preg_match_all($pattern, $contents, $matches))
{
    foreach($matches as $match) {
        $list = "<li><div class='int'>".implode("</div></li><li><div class='int'>", $match)."</div></li>\n";
    }
}else{
    $list = "No matches found";
}

在我的JS代码中,我将该行拆分为4个输入:

$int.html(function(i, html) {
    return html.replace(/(\d+)(.+)/,function(str,s1,s2){
        var text = s2.split('.');
        var text2 = text[1].split('-');
        var text3 = text2[1].split(' ');
        return '<input class="r" name="scene" value="'+ s1.replace(/^\s*/, '').replace(/\s*$/, '') +'" />' +
            '<input class="r" name="int_ext" value="'+ text[0].replace(/^\s*/, '').replace(/\s*$/, '') +'" />' +
            '<input class="r" name="scene_desc" value="'+ text2[0].replace(/^\s*/, '').replace(/\s*$/, '') +'" />' +
            '<input class="r" name="day_night" value="'+ text3[1].replace(/^\s*/, '').replace(/\s*$/, '') +'" />';
    });
});

我正在尝试形成一个AJAX请求,将值发送到PHP页面进行处理,我不知道如何获取我需要的数据并通过AJAX发送它(我知道如何执行AJAX请求,但在这种情况下,我不知道如何获取要处理的动态输入数量。)

任何提示?

3 个答案:

答案 0 :(得分:2)

选项A:

使用标准PHP。

HTML代码应为:

<input type="text" class="r" name="scene[]" value="1" />
<input type="text" class="r" name="int_ext[]" value="INT" />
<input type="text" class="r" name="scene_desc[]" value="Bedroom" />
<input type="text" class="r" name="day_night[]" value="DAY" />

<input type="text" class="r" name="scene[]" value="2" />
<input type="text" class="r" name="int_ext[]" value="EXT" />
<input type="text" class="r" name="scene_desc[]" value="Outside" />
<input type="text" class="r" name="day_night[]" value="DAY" />

<input type="text" class="r" name="scene[]" value="3" />
<input type="text" class="r" name="int_ext[]" value="INT" />
<input type="text" class="r" name="scene_desc[]" value="Bedroom" />
<input type="text" class="r" name="day_night[]" value="DAY" />

<input type="text" class="r" name="scene[]" value="4" />
<input type="text" class="r" name="int_ext[]" value="EXT" />
<input type="text" class="r" name="scene_desc[]" value="Bedroom" />
<input type="text" class="r" name="day_night[]" value="NIGHT" />

然后在PHP方面你可以做到这一点:

<?php

foreach($_POST['scene'] as $k=>$scene) {
    $int_ext = $_POST['int_ext'][$k];
    $scene_desc = $_POST['scene_desc'][$k];
    $day_night = $_POST['day_night'][$k];

   mysql_query("INSERT INTO (`project_id`, `scene_number`, `int_ext`, `scene_description`, `day_night`) VALUES (10, '{$scene}', '{$int_ext}', '{$scene_desc}', '{$day_night}')");
}

?>

我认为Javascript根本不应该考虑到这一点。只需使用包含method="post"的普通表单标记提交。

选项B:

使用AJAX提交,但这需要使用JSON和其他高级技术。

HTML代码:

<input type="text" class="r" name="scene" value="1" />
<input type="text" class="r" name="int_ext" value="INT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="DAY" />

<input type="text" class="r" name="scene" value="2" />
<input type="text" class="r" name="int_ext" value="EXT" />
<input type="text" class="r" name="scene_desc" value="Outside" />
<input type="text" class="r" name="day_night" value="DAY" />

<input type="text" class="r" name="scene" value="3" />
<input type="text" class="r" name="int_ext" value="INT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="DAY" />

<input type="text" class="r" name="scene" value="4" />
<input type="text" class="r" name="int_ext" value="EXT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="NIGHT" />

使用Javascript:

$("#submitbutton").click(function() {
    var data = {};
    $("input[name=scene]").each(function() {
        data[$(this).val()] = {
            intext: $(this).next("input[name=int_ext]").val(),
            desc: $(this).next("input[name=scene_desc]").val(),
            daynight: $(this).next("input[name=day_night]").val()
        };
    });
    $.post("/submit.php", {data: JSON.stringify(data)}, function(resp) {
        //success
    });
});

PHP:

<?php

$scenes = json_decode($_POST['data']);

print_r($scenes); //you should be able to figure out what to do with it from there...

?>

答案 1 :(得分:1)

Diodeus是对的,但看起来你希望jQuery尽可能地帮助你的PHP ...

<form>
    <fieldset>
        <legend>group 1</legend>
<input type="text" class="r" name="scene" value="1" />
<input type="text" class="r" name="int_ext" value="INT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="DAY" />
        </fieldset>
<fieldset>
        <legend>group 2</legend>
<input type="text" class="r" name="scene" value="2" />
<input type="text" class="r" name="int_ext" value="EXT" />
<input type="text" class="r" name="scene_desc" value="Outside" />
<input type="text" class="r" name="day_night" value="DAY" />
  </fieldset>
<fieldset>
        <legend>group 3</legend>
<input type="text" class="r" name="scene" value="3" />
<input type="text" class="r" name="int_ext" value="INT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="DAY" />
  </fieldset>
<fieldset>
        <legend>group 4</legend>
<input type="text" class="r" name="scene" value="4" />
<input type="text" class="r" name="int_ext" value="EXT" />
<input type="text" class="r" name="scene_desc" value="Bedroom" />
<input type="text" class="r" name="day_night" value="NIGHT" />
  </fieldset>
    <input type="button" name="mybutton" value="submit me">
  </form>

javascript to Ajax一次发布4个输入,异步:

$(document).ready(
    function(event){
        $("input :button").click(
            $("fieldset").each(
                function(index, elem){
                    $.post("your Url", $(this).find("input").serializeArray(), function(text,data,xhr){
                    alert("post completed!");
//recommend a 'message' section to your page to append any errors for each 4 pack inserted.  maybe removing all successful fieldset blocks and only leaving errored sections?
                    });
                }
            );

        );
    }
);

答案 2 :(得分:-1)

jQuery是一个客户端工具,与服务器端数据库功能无关。

你基本上是张贴一张表格。 PHP处理服务器中的表单,而不是jQuery。这是一个PHP问题,而不是jQuery问题。