qq_29271533
pixynj
采纳率80%
2016-10-11 08:17

jsp ajax 无刷新提交form表单,并返回结果在当前页面?怎么做,求具体的demo

20
已采纳

jsp 页面多个div 其中一个如下

 <div id="a">
 <form>
     <input type="text" name="username"/>
     <input type="submit" value="查询" />
 </form>
 <div>
 <!-- 此处显示提交后后台返回来的数据-->
 </div>
</div>

如何提交这个form表单到后台 ,当前页面其他的div不动,返回的结果在当前页面
ajax或者js如何写
!一定要提交表单不刷新其他部分,最后类似贴吧回复的效果,输入后,直接在下面显示

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

7条回答

  • ruanxianqing 阮二 5年前

    我知道你的意思了 ,
    1:你不要用submit这个标签 用 然后自己写onclick事件
    2:在onclick事件里获取表单的数据 通过ajax传到后台
    3:ajax获取到后台传回的数据 append到div中

    因为 你用submit就是为自动刷新的

    点赞 2 评论 复制链接分享
  • qq_21873571 qq_21873571 5年前

    图片说明大概就是这个意思

    点赞 3 评论 复制链接分享
  • qq_21873571 qq_21873571 5年前

    submit 用其他的代替把,
    $.ajax({
    type: "POST",
    url: "路径",
    data: "username=John",
    success: function(msg){
    //返回回来的值
    }
    });

    点赞 1 评论 复制链接分享
  • baidu_34049233 情人节也放假 5年前

    给具体按钮或者页面元素添加onclick事件,触发ajax请求所在的方法,不要进行form的submit触发

    点赞 评论 复制链接分享
  • u010018421 effiu 5年前
     $.ajax({
            url:"",
            dataType:"",
            type:""
            data:$("#formId").serialize(),
            success:function(data){},
            error:function(data){}
    })
    
    

    $("#formId").serialize(),会对form表单的数据进行封装

    点赞 评论 复制链接分享
  • jzh861752408 jzh861752408 5年前

    ajax 请求成功以后 追加到div里面就可以了

    点赞 评论 复制链接分享
  • showbo GoCityPass新加坡曼谷通票 5年前
     <div id="a">
    
            <input type="text" id="username" />
            <input type="submit" value="查询" onclick="doSearch()" />
    
        <div id="result">
            <!-- 此处显示提交后后台返回来的数据-->
        </div>
    </div>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <script>
        function doSearch() {
            var v = $('#username').val();
            if (v != '') {
                //xxxxx.jsp获取username参数(POST)提交的,然后返回查询结果的html代码就行,不要返回html,body,head之类的标签,可能导致浏览器解析出错
                $('#result').load('xxxxx.jsp', {username:v});
            }
        }
    </script>
    
    点赞 评论 复制链接分享

相关推荐