如何使用jQuery向后端提交值并接收结果

时间:2013-03-17 05:02:33

标签: jquery ajax jsp struts2

我使用以下jquery代码来接收值 并验证完美有效的价值观。然后将它们发送到我的java应用程序并接收响应,但它不会将请求发送到指定的方法。

 <script type="text/javascript">
            $(document).ready(function(){
                $('#reg').click(function(){
                    $('#signup').show('fast');
                });
                $('#register').click(function(){
                    var name = $("#name").val();
                    var family = $("#family").val();
                    if(name.length <= 1)
                    {
                        $("#messageSent").text("name is invalid");
                    }
                    else if(family.length <= 1){
                            $("#messageSent").text("family is invalid");
                    }else{
                        var data = 'name=' + name & 'family='+ family;
                          $.ajax({
                              type:"GET",
                              cache:false,
                              url:"http://localhost:8080/myApp/register.jsp",
                              data : data,
                              success:function(html){
                                  $("#messageSent").html(html);
                              }
                          });
                          return false;
                         }

                    });
                });

4 个答案:

答案 0 :(得分:1)

好的,这就是你需要做的事情

1)如何将表单的值传递给验证函数?

答案:您不需要传递验证函数可以获取表单元素值的值。这是你如何做到的。

var name=$("name").val();
var family=$("family").val();

获得所有值后,您可以按照要求进行验证。

2)如何显示错误或确认? (因此,一旦提交,表格不应隐藏。)

答案:您可以创建一个div并将其css属性设置为display:hidden。如果你的验证函数没有验证表单,你可以使这个div可见,并在其中显示错误。

<div id="merror" style="display:none"></div>

然后在你的验证函数中

$("merror").show();
$("merror").html("The form validation failed, please try again");

3)我的方法还有其他替代方法吗?

答案:如果您已经在使用jquery,请使用jquery $ .post发布数据而不是常规的javascript ajax方法。使用jquery方法的好处是它的跨浏览器兼容并且更容易使用。

还有一件事。当您从服务器收到响应时,您应该显示确认信息。

答案 1 :(得分:1)

您可以使用jquery validate验证表单。

请参阅此链接以获取更多信息:http://docs.jquery.com/Plugins/Validation

请找到更新的答案。希望它有所帮助。

<script type="text/javascript">
$(document).ready(function () {
    $('#registrationform').hide();
    $('#registrationBtn').click(function () {
        $('#registrationform').show();
    });
});

function saveForm() {
    $("#registrationform").validate({
        rules: {
            //add rules for validation here
            name : "required"
        },
        submitHandler: function() {
            //ajax code to execute if form is successfully validated
            var request = $("#registrationform").serialize();
            $.ajax({
                type: "POST",
                url: url,
                data: request,
                dataType:"json",
                async:false,
                success: function(response){    
                    $('#registrationform').hide();                                                           
                },
                error: function(XMLHttpRequest,textStatus){                     
                }
            });            
        },
        messages : {
            //error messages to display
            name : "Please enter the name"
        }
    });
}
</script>
<input type="button" id="registrationBtn" name="registrationBtn" value="Register"/>
<form id="registrationform">
    <input type="text" id="name" name="name" /><br/>
    <input type="submit" id="submitBtn" name="submitBtn" onclick="saveForm();"/>
</form>

答案 2 :(得分:1)

为什么不使用AJAX jQuery? “$就({});”

我希望我能帮忙。

$(document).ready(function() {
   $('#register').submit(function() {
      var name = $('#name').val();
      var family = $('#family').val();
      if($.trim(name) == '' || $.trim(family) == '') {
         alert('You can not leave fields blank. Sorry.');
      } else {
         $.ajax({
            type: 'POST',
            url: 'form.php',
            beforeSend: function() {
               // function while sending...
            },
            success: function(data) {
               // function if success. "data" returns the response
            },
            error: function() {
               // Create function for errors in the page request.
            }
         });
      }
   });
});

答案 3 :(得分:1)

创建另一个jsp文件并将结果放入其中然后从第一页调用控制器并在主页的div中提供新的jsp文件。

    $.ajax({
        type: "GET",
        url: "nameOfAction",
        data:"name=" + name + "family=" + email,
        dataType: "text/html;charset=utf-8",
        success: function(msg) {
            $("#nameOfDive").html(msg);
        }
    });