关于js 传参数问题

最新推荐文章于 2022-08-20 20:35:42 发布
原创 最新推荐文章于 2022-08-20 20:35:42 发布 · 置顶 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js 参数传递 页面onclick 参数 

<a class='btn btn-mini btn-info' title="详情" 
	<span style="color:#FF0000;"><span style="color:#FF0000;"> onclick="cusBatchDetail(${cusBatch.postBatchno })</span></span>">
	<!--<i class='icon-print '></i>  -->详情
	</a>

<a class='btn btn-mini btn-info' title="详情"<span style="background-color: rgb(255, 255, 255);"><span style="color:#FF0000;"> <span style="color:#FF0000;">onclick="cusBatchDetail('${cusBatch.postBatchno }</span>')</span></span>"><!--<i class='icon-print '></i> -->详情</a>

今天在页面间进行参数传递遇到了一个问题，传递002，在函数获取到竟然是2，后来才发现是缺少单引号












有单引号的，将是字符串，传递到js函数中，参数值不变，比如001，传过去还是001


没有单引号的，类似整型，传递到js函数，参数可能会变化，比如001，传过去就是1














                

        

    


  



    



                



	

		

			

				
					
js 页面传参数时 参数值含特殊字符的问题

				
			

			

				

					10-29
				

			

		

		

			
				
在JavaScript中，页面之间的参数传递是一项常见的任务，但当参数值包含特殊字符时，可能会引发一系列问题。特殊字符，如 `#`, `&`, `?` 等，在URL中有着特殊的含义，如果不进行适当的编码，它们可能会导致解析错误...

			
		

	



                

            
              



	

		

			

				
					
JS URL传中文参数引发的乱码问题

				
			

			

				

					12-09
				

			

		

		

			
				
1、在JS里对中文参数进行两次转码   代码如下:  var login_name = document.getElementById(“loginname”).value;  login_name = encodeURI(login_name);  login_name = encodeURI(login_name);  2、在服务器端对...

			
		

	



              


  
              

                


	

		

			

				
					
JS变量传值以0开头的处理方式

				
			

			

				

					jiuweijava1的博客
				

				

					06-02
					
					1124
					
				

			

		

		

			
				
今天项目中在需要传入订单号，但是订单号都是以0开头，每次都有问题，（017895555变成100252002变成8）后来同事提醒说，是js会把这个变量当成number类型的八进制。

传值的时候，给参数加上单引号就可以了。


...

			
		

	





	

		

			

				
					
Java JS 引号问题

				
			

			

				

					藏经阁
				

				

					07-11
					
					169
					
				

			

		

		

			
				
1.单引号
2.\"



			
		

	



		

			
		



	

		

			

				
					
JS防止以0001为参数传递时转变为1

				
			

			

				

					weixin_42547014的博客
				

				

					10-10
					
					1597
					
				

			

		

		

			
				
解决起来很简单，将0001以字符串的形式进行传递
onclick = "selectNum('0001')"

function selectNum(num){
	console.log(num)        //0001
}

onclick = "selectNum(0001)"

function selectNum(num){
	console.log(num)        //1
}

拼接时实现方法
$('#selectNum').append(
"<input type='check

			
		

	





	

		

			

				
					
JS方法传参自动转换问题

				
			

			

				

					代码的深渊
				

				

					03-24
					
					775
					
				

			

		

		

			
				
项目场景：
JSP页面，A标签，调用的JS方法有四个传参，传递的都是数字。

问题描述
<A style="FONT-WEIGHT: bold; COLOR: blue" 
href="javascript:printBill(0060204243,3440102,00024359247,311790492)">账单打印</A>

function printBill(appNoS,orgNoS,mrSectNoS,consNoS) {
    alert("appNo:"+appN

			
		

	





	

		

			

				
					
js接收数字，最后几位数字变成了0

				
			

			

				

					weixin_43751710的博客
				

				

					05-05
					
					9320
					
				

			

		

		

			
				
遇到一个问题：
js接收数字，最后几位数字变成了0
从Java后台传一个数值到前端的js中，Java中输出为97761478957858935，
但在js中输出便成了97761478957858930
最后一位竟然都变成了0
原来是js数字最长为16位，97761478957858935是17位，所以最后一位自动变为了0
解决方法也很简单，只要在Java后台传数值时，将其变为String类型的即可...

			
		

	





	

		

			

				
					
js动态添加onclick事件可传参数与不传参数

				
			

			

				

					10-25
				

			

		

		

			
				
首先，来看一下不传参数的情况。当我们的函数不接收任何参数时，可以直接将函数名赋值给元素的onclick属性。例如：  ```javascript window.onload=function(){  document.getElementById('btnTest').onclick = test;...

			
		

	





	

		

			

				
					
js 页面传参数时 参数值含特殊字符的问题.docx

				
			

			

				

					01-19
				

			

		

		

			
				
### js 页面传参数时 参数值含特殊字符的问题  在JavaScript编程中，经常需要在不同页面之间传递参数。当参数中包含特殊字符时，可能会导致参数传递失败或出现乱码等问题。本文将详细介绍如何解决js页面传参数时参数...

			
		

	





	

		

			

				
					
分享js一个传参值会改变

				
			

			

				

					weixin_45568632的博客
				

				

					08-20
					
					395
					
				

			

		

		

			
				
参数时， 一定要用 引号 包裹  参数 ， 即使参数是字符串类型的数字  也要用引号 包裹，   不然参数的值会改变。

			
		

	





	

		

			

				
					
js 方法在传形参的时候会自动把是数字String转为number

				
			

			

				

					qq_41486137的博客
				

				

					06-25
					
					3295
					
				

			

		

		

			
				
以下通过其他大佬的经验和自己总结
一般情况是这样处理：
给一个标签加上一个onclick方法【自定义函数DelSup(id)】有参数 ,此时应该注意参数的书写，正确写法为
删除
注意，用到自定义函数时，参数部分应该是DelSup（“id”），所以里面需要写转义字符"，这里是一般情况。
还有在字符串拼接中需要这样处理：
‘’ + val.supplier_id + ‘’

这里我传入的是一个字符串数...

			
		

	





	

		

			

				
					
js数字串传参时变科学计数法

				
			

			

				

					qq_37634423的博客
				

				

					12-25
					
					2416
					
				

			

		

		

			
				
return "未确认";

			
		

	





	

		

			

				
					
关于js传参参数被修改

				
			

			

				

					weixin_49132861的博客
				

				

					04-20
					
					931
					
				

			

		

		

			
				
根据参数查询查不到数据，后来发现是js在传参的时候参数不一致，只要将参数用**’ '**传递就不会丢失了



			
		

	





	

		

			

				
					
js数字传值

				
			

			

				

					chycmds的博客
				

				

					09-15
					
					620
					
				

			

		

		

			
				
js事件传值数字易转换为科学计数，为防止转换成科学技术，传值时加单引号转换为String 
onclick（‘ ${item.id}’）；

			
		

	





	

		

			

				
					
Bootstrap 基础CSS - 按钮（Buttons）

					
热门推荐

				
			

			

				

					Try my best
				

				

					01-27
					
					2万+
					
				

			

		

		

			
				
默认按钮
建议只在和标签上应用.btn。







Button

class=""

Description





Default

btn

Standard gray button with gradient



Primary

btn btn-primary

Provides extra visual weight

			
		

	





	

		

			

				
					
js 中参数传递（值传递和引用传递）

				
			

			

				

					jidetashuo的博客
				

				

					12-13
					
					906
					
				

			

		

		

			
				
js中的参数传递包括值传递和引用传递
1.值传递（数字，字符串等）
例如：
$(function(){
   var str="11";   test1(str);   alert(str);//值传递测试  结果：11
})

function test1(str){ str="22"}


上述代码测试可以看出数字，字符串值传递：是把值直接复制进入方法内,所以在方法内对参数进行修改

			
		

	





	

		

			

				
					
bootstrap   btn 按钮颜色

				
			

			

				

					xiao1_1bing的博客
				

				

					08-12
					
					2万+
					
				

			

		

		

			
				
白色    btn，

​浅蓝色     btn btn-primary，

​深蓝色    btn btn-info，

​绿色       btn btn-success，

​黄色       btn btn-warning，

​红色       btn btn-danger，

​黑色      btn btn-inverse，

			
		

	





	

		

			

				
					
js传MultipartFile参数

					
最新发布

				
			

			

				

					11-23
				

			

		

		

			
				
<think>
我们正在处理一个关于在JavaScript中传递MultipartFile参数的问题。根据引用内容，我们得知MultipartFile通常用于文件上传，且Content-Type应为multipart/form-data。在JavaScript中，我们通常使用FormData对象来处理这种类型的数据。

 步骤：
 1. 创建一个FormData对象。
 2. 将文件添加到FormData对象中。
 3. 使用AJAX（如fetch或XMLHttpRequest）发送FormData对象。

 注意：由于引用中提到了前后端处理时Content-Type的问题，我们在前端设置Content-Type为multipart/form-data时，实际上不需要手动设置，因为浏览器会自动设置正确的Content-Type和边界（boundary）。

 示例代码：
 假设我们有一个input元素用于选择文件：
 <input type="file" id="fileInput">

 然后，我们可以使用以下JavaScript代码来发送文件：

 使用fetch：
 ```javascript
 const fileInput = document.getElementById('fileInput');
 const file = fileInput.files[0]; // 获取第一个文件

 let formData = new FormData();
 formData.append('file', file); // 'file'是后端接收文件的参数名

 // 发送请求
 fetch('/upload', {
     method: 'POST',
     body: formData
     // 注意：不要手动设置Content-Type，浏览器会自动设置
 })
 .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error('Error:', error));
 ```

 使用XMLHttpRequest：
 ```javascript
 const fileInput = document.getElementById('fileInput');
 const file = fileInput.files[0];

 let formData = new FormData();
 formData.append('file', file);

 let xhr = new XMLHttpRequest();
 xhr.open('POST', '/upload', true);
 xhr.onload = function () {
     if (xhr.status === 200) {
         console.log('Upload successful!');
     } else {
         console.error('Upload failed.');
     }
 };
 xhr.send(formData);
 ```

 如果需要同时传递其他非文件字段，也可以添加到FormData中：
 ```javascript
 formData.append('username', 'user123');
 ```

 引用说明：根据引用[1]，我们知道前后端在处理MultipartFile时，Content-Type必须为multipart/form-data，而使用FormData对象正是为了满足这个要求。同时，引用[2]中提供了Java后端处理文件的一些工具方法，但前端我们只需关注如何正确构造和发送FormData。

 因此，在JavaScript中传递MultipartFile参数的关键是使用FormData对象，并通过AJAX请求发送。

 相关问题：
 1. 如何在JavaScript中同时上传多个文件？
 2. 如何监控文件上传的进度？
 3. 使用FormData上传文件时，如何添加额外的参数？
 4. 如何处理文件上传失败的情况？
 5. 如何限制上传文件的大小和类型？
</think>
在JavaScript中传递`MultipartFile`参数（即上传文件）主要通过`FormData`对象实现。以下是完整实现方法：

### 核心实现步骤
1. **前端使用FormData封装文件**
   ```javascript
   // 获取文件输入元素
   const fileInput = document.getElementById('fileUpload');
   const file = fileInput.files[0]; // 获取用户选择的文件

   // 创建FormData对象并添加文件
   const formData = new FormData();
   formData.append('file', file); // 'file'是后端接收参数名
   formData.append('fileName', file.name); // 可添加额外参数
   ```

2. **通过Fetch API发送请求**
   ```javascript
   fetch('/upload-endpoint', {
     method: 'POST',
     body: formData, // 自动设置multipart/form-data
     // 注意：不要手动设置Content-Type头，浏览器会自动处理boundary
   })
   .then(response => response.json())
   .then(data => console.log('上传成功', data))
   .catch(error => console.error('上传失败', error));
   ```

3. **XMLHttpRequest方式（兼容旧浏览器）**
   ```javascript
   const xhr = new XMLHttpRequest();
   xhr.open('POST', '/upload-endpoint');
   
   xhr.upload.onprogress = (e) => {
     if (e.lengthComputable) {
       console.log(`上传进度: ${(e.loaded / e.total * 100).toFixed(1)}%`);
     }
   };
   
   xhr.onload = () => {
     if (xhr.status === 200) {
       console.log('上传完成', JSON.parse(xhr.response));
     }
   };
   
   xhr.send(formData);
   ```

### 关键注意事项
1. **Content-Type处理**  
   浏览器会自动设置`Content-Type: multipart/form-data; boundary=----WebKitFormBoundary...`，**禁止手动设置该请求头**，否则会丢失boundary导致后端解析失败[^1]。

2. **多文件上传**  
   使用循环添加多个文件：
   ```javascript
   const files = fileInput.files;
   for (let i = 0; i < files.length; i++) {
     formData.append(`files`, files[i]); // 后端用数组接收
   }
   ```

3. **文件验证示例**
   ```javascript
   // 验证文件类型和大小
   if (!file.type.startsWith('image/')) {
     throw new Error('仅支持图片文件');
   }
   if (file.size > 5 * 1024 * 1024) {
     throw new Error('文件不能超过5MB');
   }
   ```

### 后端配合要点
```java
// Spring Boot示例
@PostMapping("/upload-endpoint")
public ResponseEntity<String> handleUpload(
    @RequestParam("file") MultipartFile file, // 参数名需与前端的formData.append()一致
    @RequestParam(required = false) String fileName // 额外参数
) {
    // 处理文件逻辑
}
```

### 完整示例（React组件）
```jsx
function FileUploader() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('file', e.target.files[0]);
    
    try {
      const res = await fetch('/api/upload', {
        method: 'POST',
        body: formData
      });
      console.log(await res.json());
    } catch (err) {
      console.error('上传失败', err);
    }
  };

  return <input type="file" onChange={handleSubmit} />;
}
```

[^1]: 后端需要`multipart/form-data`格式，手动设置Content-Type会导致边界丢失
[^2]: 文件处理需前后端协同验证类型和大小

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值