无法获取HTML表单值,表单标记过早关闭

时间:2017-05-22 14:03:41

标签: jquery html ajax spring-mvc jstl

我试图在JSTL的帮助下将每行作为单独的表填充一个表。 视图本身作为ModelAndView对象从控制器返回到AJAX成功函数,并附加到页面。 视图以我想要的方式呈现和追加。 新附加的视图还包含用于将表单值传递给控制器​​的ajax调用。

问题我没有在jquery函数中获取表单的值。 我检查了chrome中的代码,发现每行中的表单标签都是立即关闭的。输入元素放在表单标记之外。

jsp形式与jstl:

 <tr>
    <form class="period${count}">   
            <td rowspan="3">Period ${dispcount}</td>
            <td>Subject</td>
            <c:forEach items="${period}" var="day">
                <td>
                    <div id="dat_${count}_${day.key}" class="period${count} day">${day.value.sub}</div>
                    <input style="border: none" type="text"
                    name="inp_${count}_${day.key}" id="inp_${count}_${day.key}"
                    value="${day.value.sub}" class="inperiod${count} hideit" />
                </td>
            </c:forEach>

            <td><input type="button"
                onclick="testFunction(${count},'${classname}',this)"
                class="hideit inperiod${count}" value="save" /> 
                <input
                type="button" class="hideit inperiod${count}" value="cancel"
                onclick="myFunction('period','inperiod',${count})" /> 
                <input
                type="button" class="period${count}" value="edit"
                onclick="myFunction('period','inperiod',${count})" />
                </td>
    </form>
</tr>

新渲染代码中的jquery:

function testFunction(count,cname)
{     
 var x=$(".period"+count).serializeArray();

  var jso=JSON.stringify(x);
  alert("form values"+jso);

 var url = "./myAjaxFunction";   //controller method

 $.get(url,{str : jso,classname :cname},function (data) {

$.each(data, function(key, value) {

      $("#dat_"+count+"_"+key).html(value.sub);

    });
   myFunction("period","inperiod",count);

 });

}  

我需要传递给控制器​​的数据采用这种形式,因为它在其他地方使用。当所有代码都在同一个jsp中时(不使用jquery附加),此逻辑工作正常。

带有ajax调用的脚本并附加ModelAndView:

 $(function () {
            $("#Classes").change(function () {

                var x=$('#Classes option:selected').val();
                 alert(x);

                 var url="./classLoaderAJAX";

                $.post(url,{classname :x},function (data) {

                    //var html = $.parseHTML(data);
                    $("#icontainstuff").append(data);
                });
            });
        });

0 个答案:

没有答案