Ajax configuration details, ajax call explanation, ajax Chinese garbled characters and ajax form submission (with examples included)

This article mainly talks about the summary of the use of ajax, as well as detailed explanations of ajax configuration, calling, Chinese garbled characters, form submission, etc. Now let’s take a look at this article together

·The use of jquery
0. jquery.js must be introduced first, otherwise the jquery framework cannot be called
1. js is case-sensitive, please pay attention when naming it
2. jquery gets the value of the page text based on the id attribute of p: $("#demoID").val(), and gets the value of the page text based on the class attribute $(".demoCLASS").val(), if it is an assignment $(" #demoID").val("Assigned parameters")
3. $(document).ready(function(){code}), $().ready(function(){code}), $(function (){code}) have the same meaning
4. Multiple $(function(){code}) can coexist, that is, they can function at the same time as long as the names are not repeated
5. $(function(){code} ) means running as soon as the page is loaded, such as automatic click, automatic pop-up, or click monitoring or other monitoring
6. The difference between clicking after loading and "click monitoring" (very useful for reference)
For example, there is a js method, function demoFunction(){alert("This method is running");};
Click after loading: $("#demoid").click(demoFunction());
Listen after loading. This method can only be used when the button has a click action, or through jquery with a click() action: $("#demoid").click(function(){demoFunction()});
7. If it is automatically loaded and run, or needs to be monitored, it needs to be placed in the code of $(document).ready(function(){code})
8. window.onload=function(){ The difference between code} and $(function(){code})
·The usage of calling functions is different:
Window.onload = function(){code};
$(function(){code})
·The time to call the function is different
Window.load=function(){code}: You must wait for all the content in the web page to be loaded (including images) before it can be executed, such as uploading and other functions.
$(function(){code}), it can be executed after all the DOM structures in the web page are drawn.
9. AJAX Special Topic
·Required jar packages: commons-lang-2.5.jar, commons-lang3-3.1.jar, javassist-3.11.0.GA.jar
·How to write front-end js: In order to simplify the process, it is written to run when the page is loaded.
$(document).ready(function(){
$.ajax({

url : "testajax.do",// 请求地址
//timeout : 600000,//超时时间设置，单位毫秒
async : false,// 异步
cache : false,// 缓存
type : 'post',// 请求方式
data: {"name":"123"},//data: $('#formid').serialize(),//序列化表单-当触发一个form表单提交的ajax事件的时候，这个序列化方法自动将数据转化为json格式传递给后台
dataType : 'json',// 服务器返回的数据类型
success : function(msg) {// 请求成功后调用的
alert("返回json的实验成功了"+" msg.resultcode="+msg.resultcode+" msg.name="+msg.name);
},
error :function(){
alert("异常");
}
});
      });

#

      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">
    <struts>
    <!--略去一些struts2的配置信息-->
<package name="myajax" extends="json-default" namespace="/">
<global-results>
<result name="message" type="json">
<param name="root">message</param>
</result>
</global-results>
<action name="*" class="demo.action.AjaxTest" method="{1}">
        <result name="list">/index.jsp</result>
       </action>
</package> 
<!-- 包含的其他配置文件 -->
<include file="struts-method.xml"></include>
    </struts>

·Backend java code: only calls ajax, so it does not involve database operations

    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.HashMap;
    import java.util.Map;
    import javax.servlet.http.HttpServletResponse;
    import org.apache.struts2.ServletActionContext;
    public class AjaxTest {
protected Map<String, Object> message = new HashMap<String, Object>();
/** AJAX请求返回RESULT的name常量*/
protected final static String MESSAGE = "message";
public Map<String, Object> getMessage() {
return message;
}
public void setMessage(Map<String, Object> message) {
this.message = message;
}
//-登录页面中form表单提交的路径
public String testajax() throws IOException{
System.out.println("获取参数name="+ServletActionContext.getRequest().getParameter("name"));
message.put("resultcode", "0000");
message.put("resultcode", "0001");
message.put("name", "zhong文ce试");
return MESSAGE;
}
     }

·Ajax application submits form form data-form data is automatically transferred json format
Scenario description: When the specific submission information is a form and is passed to the backend through ajax, we usually use a method called serialization to convert the form into json format and pass it to the backend. (Want to see For more information, go to the PHP Chinese website
AJAX Development Manual column to learn)

·The format of the form form, the form tag has id, and the input tag has name

     <form  id="formid"> 
姓名：<input type="text" name="name" value="张三"/><br>
年龄：<input type="text" name="age" value="12"/><br>
<input type="submit" value="提交" id="submitid"/>
     </form>

·The js part of the code-can be written in a js file separately. Note that you need to introduce the jquery.js file first

   $(document).ready(function(){
$("#submitid").click(function(){ajaxhere()});
});
     //提交表单的ajax
    function ajaxhere(){
$.ajax({
url : "testajax3.do",// 请求地址
//timeout : 600000,//超时时间设置，单位毫秒
async : false,// 异步
cache : false,// 缓存
type : 'post',// 请求方式
data: $('#formid').serialize(),//序列化表单
dataType : 'json',// 服务器返回的数据类型
//contentType:"application/x-www-form-urlencoded; charset=utf-8",
success : function(msg) {// 请求成功后调用的
alert("form表单触发的实验成功了"+" msg.resultcode"+msg.resultcode+"  msg.name="+msg.name);
},
error :function(){
alert("异常");
}
});
};      
       ·传统的ajax返回方式，即java部分的返回写在流里-特别要注意这里的处理中文乱码的解决方式
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
PrintWriter writer = response.getWriter();
String a = "{\"resultcode\":\"0000\",\"name\":\"文试\"}";
writer.write(a);
writer.flush();
writer.close();

This article ends here (want to see more Just go to the PHP Chinese website

AJAX User Manual column to learn). If you have any questions, you can leave a message below.

The above is the detailed content of Ajax configuration details, ajax call explanation, ajax Chinese garbled characters and ajax form submission (with examples included). For more information, please follow other related articles on the PHP Chinese website!