ajax，jquery，$.post/$.get异步刷新div,局部刷新页面

Posted 2023-03-15

Action为struts2 <aciton="Action" class="XX.XX.XX">
<request>a.jsp</request>
</action>

代码：

$.ajax(

type: "POST",

url: "getPageDate.php", //调用的php文件

data: "page=1",

success: function(msg) //回调函数

alert( "Data Saved: " + msg ); //这里是操作

$("#content").html(

);

);

success:function(data)//后台处理数据成功后的回调函数

//  在这里执行对页面的数据刷新

$("div .a").html(data);

data：就是这次请求返回的a.jsp页面

$("div .a")：就是页面上那个<div id='a' class='a'></div> 

$("div .a").html(data)：就就是将a.jsp 页面放入到 class=a 的div中！

扩展资料：

当使用 CSS-P 的时候， 主要把它用在 DIV（division）tag 上。当把文字，图像，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。所以把它称作“层次”。所以当看到这些名词的时候，就知道它们是指一段在 DIV 中的 HTML。

使用 DIV 的方法跟使用其他 tag 的方法一样：

如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和不使用是一样的。

参考资料来源：百度百科-DIV

参考技术A 借助jquery框架完成ajax是非常容易的，代码如下：
 
$.ajax(
    url:'Action',//你对数据库的操作路径
    data://这是参数
    id:1,
    name:'zhangsan'
    ,
    type:'post',//提交方式
   // dataType:'json',//返回数据的类型
    success:function(data)//后台处理数据成功后的回调函数
       // alert(data);
     //  在这里执行对页面的数据刷新
     $("div .a").html(data);
    ,
    error:function(data)//后台处理数据失败后的回调函数
     //   alert(data)
    
)

这个是ajax的完整版，希望对你有帮助

追问

我是想返回一个页面，放入a.div中！ 不是想再a.div中html("在把a.jsp写一遍")，懂我的意思了吧！

追答  success:function(data)//后台处理数据成功后的回调函数
       //  在这里执行对页面的数据刷新
     $("div .a").html(data);
    

这里面 

data：就是这次请求返回的a.jsp页面

$("div .a")：就是页面上那个<div id='a' class='a'></div> 

$("div .a").html(data)：就就是将a.jsp 页面放入到 class=a 的div中！

追问

给我发个DEMO吧

本回答被提问者和网友采纳 参考技术B

楼主看我的

$("#_b").click(function () 
  $.ajax(
      type: "POST",
      url: "youaction.action",
      data: "name=" + var1 + "&time=" + var2,
      dataType: "json",
      success: function(responseText) 
          var valA = responseText.fieldA;
          var valB = responseText.fieldB;
          $("#a").load("a.jsp");
      ,
      error: function() 
          alert("Error!");
      
  );  
);

struts2配置:
<package name="xxx" extends="json-default">
<action name="youaction" namespace="/" class="xxx" method="methodA"> <!-- 不需要result -->
</action>
</package>



你在action的class里面最后返回的时候也不需要return "success";
用 public void methodA();
最后结尾的时候这样返回数据到前台:
PrintWriter w = response.getWriter(); //HttpServletResponse
w.write("xxxx"); // json text
w.flush();
w.close();

追问

能再细一点么， var valA = responseText.fieldA;与var valA = responseText.fieldA; 这俩是什么意思，能备注一下不！ 还有就是 不用.load()方法能实现不， .load()这个方法的兼容性不高！
w.write("xxxx"); xxxx是什么意思啊

追答

w.write("xxx");是你想返回到前台的数据,用json格式写比如"filedA":"valA","fieldB":"valB",然后你在前台, var valA = responseText.fieldA;与var valA = responseText.fieldA; 这就是后台的两个值,可以在action执行完之后使用了,就这么简单

如果你不想用load,那你就把页面在action里面读出来用json返回到前台,不过要注意的是你的html里面肯定有很多特殊符号,返回之前需要转义一下,java.net.UrlEncoder.encode(yourHtmlString, "UTF-8"); 然后前台需要用$("#a").html(responseText.yourHtmlString);

追问

给我发个DEMO吧