post请求方式写法--json和表单提交

本文深入解析了使用HttpClient进行HTTP请求的两种主要方式:JSON类型和表单类型数据发送。通过具体代码示例,展示了如何设置请求头、参数,并处理响应状态码及返回数据,为开发者提供了实用的参考。

 下面第一个 是json类型的

public static String send(String url,String data) throws DJException{
		CloseableHttpClient httpClient = HttpClients.createDefault();
		HttpPost post = null;
		CloseableHttpResponse response=null;
		try {
			post = new HttpPost(url);  // 请求方法Post
			StringEntity entity = new StringEntity(data,"utf-8");
			entity.setContentEncoding("UTF-8");    // 字符编码
			entity.setContentType("application/json");   // json类型
			post.setEntity(entity);
			response =httpClient.execute(post);
			int statusCode=	response.getStatusLine().getStatusCode(); // 返回的状态码
			if(statusCode == 200) {
				HttpEntity he = response.getEntity();
				return EntityUtils.toString(he, "UTF-8");
			}else{
				throw new DJException("服务器连接异常statusCode:"+statusCode);
			}
		} catch (IOException e) {
			e.printStackTrace();
			throw new DJException("请求失败:"+e.getMessage());
		}finally {
			try {
				response.close();
				httpClient.close();
			} catch (IOException e) {
			}	
		}
		
	}

第二个是传入的参数是表单类型的  两种方式,区别不大

类型为from-data数据格式的请求方式
 /**
     * 类型为from-data数据格式的请求方式
     * @param url
     * @return
     * @throws Exception
     */
	public static String send(String url,Map<String,String> map) throws Exception{
		CloseableHttpClient httpClient = HttpClients.createDefault();
		HttpPost post = null;
		CloseableHttpResponse response=null;
		try {
			post = new HttpPost(url);
            // params添加表单数据 作为参数
			List<NameValuePair> params = new ArrayList();
			for (String parameter: map.keySet()) {
				params.add(new BasicNameValuePair(parameter, map.get(parameter)));
			}
            UrlEncodedFormEntity  entity = new UrlEncodedFormEntity(params,"UTF-8");
			entity.setContentEncoding("UTF-8");
			entity.setContentType("application/x-www-form-urlencoded");
			post.setEntity(entity);
			response =httpClient.execute(post);
			int statusCode=	response.getStatusLine().getStatusCode();
			if(statusCode == 200) {
				HttpEntity he = response.getEntity();
				return EntityUtils.toString(he, "UTF-8");
			}else{
				throw new DJException("服务器连接异常statusCode:"+statusCode);
			}
		} catch (IOException e) {
			e.printStackTrace();
			throw new DJException("请求失败:"+e.getMessage());
		}finally {
			try {
				response.close();
				httpClient.close();
			} catch (IOException e) {
			}
		}

	}



	/*
	 * **HttpClient Post 以表单提交方式请求 带参数**
	 */
	public static String send2(String url,Map<String,Object> map) throws DJException, IOException{
		//1、创建HttpClient
		org.apache.commons.httpclient.HttpClient httpClient = new org.apache.commons.httpclient.HttpClient();
		//2、创建get或post请求方法
		PostMethod method = new PostMethod(url);
		//3、设置编码
		httpClient.getParams().setContentCharset("UTF-8");
		//4、设置请求消息头,为表单方式提交
		method.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
		Iterator<Map.Entry<String, Object>> it = map.entrySet().iterator();
		while (it.hasNext()) {
			Map.Entry<String, Object> entry = it.next();
			//5、设置参数
			//method.setRequestHeader(key,value);
			method.setParameter(entry.getKey(), entry.getValue().toString());
		}


//		6、执行提交
		httpClient.executeMethod(method);
		int statusCode= method.getStatusLine().getStatusCode();
		if(statusCode == 200) {
			String responseBodyAsString = method.getResponseBodyAsString();
			return responseBodyAsString;
		}else{
			throw new DJException("服务器连接异常statusCode:"+statusCode);
		}
	}

其他资料:https://www.cnblogs.com/hanyj123/p/9641626.html

https://www.cnblogs.com/shengwei/p/5527394.html

<think>好的,我现在需要回答用户关于前端表单提交请求的实现方法示例代码的问题。用户提到了想了解如何通过ajax或者FormData来实现表单提交,同时参考了提供的三个引用内容。首先,我需要整理这些信息,并确保回答结构清晰,符合用户的要求。 首先,用户的需求是查找前端表单提交的方法或代码示例。根据提供的引用,引用[1]提到了使用ajax提交表单以避免页面刷新,引用[2]给出了使用FormData的示例代码,而引用[3]展示了使用uniapp的请求方法。我需要综合这些信息,给出不同的实现方式。 接下来,我需要确定回答的结构。用户可能需要分步骤的说明,以及不同场景下的实现方法。比如传统的同步提交、使用原生JavaScript的Ajax、结合FormData的方法,以及使用常见框架如jQuery、Vue.js或uniapp的例子。此外,还需要注意事项部分,比如防止重复提交、数据验证等,这些都是用户可能关心的点。 然后,我需要检查每个方法的正确性。例如,传统的表单提交需要设置actionmethod,但会导致页面刷新。Ajax方式则需要使用XMLHttpRequest对象,并处理响应。FormData的使用是否正确,特别是在处理文件上传时是否需要设置contentType为false,以及processData的设置。这些细节需要准确,避免误导用户。 同时,引用中的代码示例需要正确引用,比如引用[2]中的FormData示例,可能需要指出在Vue中的使用方式。引用[3]中的uniapp示例是否正确,是否需要补充说明。另外,用户提到的vue.js,可能需要提供一个使用axios的示例,这样更符合实际开发情况。 还要考虑用户可能的后续问题,比如如何处理跨域问题、如何验证表单数据、如何防止CSRF攻击等,可以在注意事项部分简要提及,或者生成相关问题供用户参考。 最后,确保回答符合格式要求,使用中文,正确使用LaTeX格式(虽然这个问题可能涉及较少数学公式,但如果有变量或代码内联可能需要使用$...$),独立公式使用$$...$$,但在这个回答中可能用不到。同时,生成的相关问题要贴合主题,帮助用户深入理解。 现在需要组织这些内容,确保每个部分清晰,代码示例正确,并且引用正确标注。例如,在介绍Ajax提交时,引用[1][2]的内容,说明使用FormData的优势实现方式。在示例代码中,使用正确的语法,比如XMLHttpRequest的创建、事件监听,以及如何处理响应。对于框架示例,如jQuery的$.ajax,Vue中使用axios,uniapp的uni.request,都需要准确展示代码结构。 可能还需要注意几点:在FormData示例中,是否需要设置请求头?比如在引用[2]中,代码没有设置Content-Type,因为使用FormData时,浏览器会自动设置正确的multipart/form-data,并且jQuery的processData设置为false可以防止转换数据格式。这一点需要明确说明,避免用户混淆。 另外,在Vue.js的示例中,如果使用axios,需要提醒用户安装axios库,并在方法中正确绑定数据。同时,处理成功失败的回调,以及可能的错误处理,比如网络问题或服务器错误。 最后,生成的相关问题应该覆盖用户可能进一步探索的方向,比如性能优化、安全措施、不同框架的实现差异等。例如,如何处理文件上传、如何实现表单验证、如何防止重复提交等,这些都是用户可能关心的问题。 总结来说,整个思考过程需要综合用户的问题、提供的引用内容,以及前端表单提交的常见方法,确保回答全面、准确,并且结构清晰,帮助用户解决问题。</think>### 前端表单提交请求实现方法及示例代码 表单提交主要有两种方式:**同步提交****异步提交(Ajax)**。现代前端开发中,异步提交更为常见,因其可避免页面刷新并实现局部更新。以下是具体实现方法及代码示例: --- #### 一、传统同步提交(不推荐) ```html <form action="/submit" method="POST"> <input type="text" name="username"> <input type="password" name="password"> <button type="submit">提交</button> </form> ``` - **缺点**:页面会刷新,用户体验较差[^1]。 --- #### 二、异步提交(Ajax) ##### 1. 原生JavaScript实现 ```javascript document.querySelector('form').addEventListener('submit', function(e) { e.preventDefault(); // 阻止默认提交行为 const formData = new FormData(this); // 自动收集表单数据[^2] const xhr = new XMLHttpRequest(); xhr.open('POST', '/submit'); xhr.onload = function() { if (xhr.status === 200) { console.log('提交成功:', xhr.responseText); } }; xhr.send(formData); }); ``` ##### 2. 使用FormData处理文件上传 ```javascript const form = new FormData(); form.append('file', fileInput.files[0]); // 文件字段 form.append('name', 'example'); fetch('/upload', { method: 'POST', body: form }).then(response => response.json()); ``` - **注意**:使用`FormData`时,浏览器会自动设置`Content-Type: multipart/form-data`,无需手动指定。 --- #### 三、常见框架示例 ##### 1. jQuery实现 ```javascript $('form').submit(function(e) { e.preventDefault(); $.ajax({ url: '/submit', method: 'POST', data: $(this).serialize(), // 序列化表单数据 success: function(res) { console.log('响应:', res); } }); }); ``` ##### 2. Vue.js + axios ```html <template> <form @submit.prevent="handleSubmit"> <input v-model="formData.username"> <button type="submit">提交</button> </form> </template> <script> import axios from 'axios'; export default { data() { return { formData: { username: '' } }; }, methods: { handleSubmit() { axios.post('/submit', this.formData) .then(res => console.log('成功:', res)) .catch(err => console.error('失败:', err)); } } }; </script> ``` ##### 3. uniapp请求示例[^3] ```javascript uni.request({ url: '/api/submit', method: 'POST', data: { username: 'test' }, success: (res) => console.log('响应:', res.data), fail: (err) => console.error('请求失败:', err) }); ``` --- #### 四、注意事项 1. **防止重复提交**:在提交按钮添加加载状态或禁用属性。 2. **数据验证**:前端需做基础验证(如非空、格式校验),后端需做最终验证。 3. **跨域问题**:若接口跨域,需配置`CORS`或代理。 4. **安全措施**:对敏感数据加密,添加CSRF Token防护。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值