javascript如何实现页面不跳转

已于 2022-05-01 12:02:08 修改
阅读量7.5k 收藏 3
点赞数 2
文章标签： javascript xmlhttprequest iframe
于 2012-08-31 11:06:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/noback7/article/details/7928164
版权

在一个html页面中，需要提交表单给另一个页面，我们希望在后台运行，而不打开新页面，有两种方法:

1、iframe方法

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript">
</script>
</head>
<body>
<iframe name="testserver" style="display:none;" src=''></iframe> 
<form name="settest" action="test.cgi" target="testserver">
<table>
<tr><td>
用户名:</td><td><input type="text" INPUT NAME="username" SIZE="30"  maxlength="20"></td></tr>
<tr><td>
密码:</td><td><input type="text" INPUT NAME="password" SIZE="30"  maxlength="20"></td></tr>
<tr><td>
<input type="submit" value="保存"></td></tr>
</table>
</Form>
</body>
</html>

test.cgi可以替换为任意要转向的html网页，form的target需要与iframe name保持一致

2、ajax方法

function createXHR()
{
	ar xhr;
	try
	{
		xhr = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e)
	{
		try
		{
			xhr = new ActiveObject("Microsoft.XMLHTTP");
		}
		catch(E)
		{
			xhr = false;
		}
	}

	if(!xhr && typeof XMLHttpRequest != 'undefined')
	{
		xhr = new XMLHttpRequest();
	}
	return xhr;
}

function sender(val)
{
	xhr = createXHR();
	if(xhr)
	{
		xhr.onreadystatechange = callbackFunction;
		xhr.open("GET","test.cgi?"+val);  //调用test.cgi程序，val为需要传递的参数
		xhr.send(null);
	}
	else
	{
		alert("浏览器不支持，请更换浏览器！");
	}
}

function callbackFunction()
{
	if(xhr.readyState == 4)
	{
		if(xhr.status == 200)
		{
			var returnValue = xhr.responseText;//returnValue为test.cgi返回的结果
		}
		else
		{
			alert("页面出现异常！");
		}
	}
}
 

 


                

        

        

        

    




    

      

        

            

              
                
                  柒号华仔
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
JavaScript实现页面跳转的几种常用方式

				
			

			

				

					10-23
				

			

		

		

			
				
主要介绍了JavaScript实现页面跳转的几种常用方式,结合实例形式对比分析了JavaScript页面跳转的常见实现技巧与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下

			
		

	



                

              
                



	

		

			

				
					
JavaScript实现定时页面跳转功能示例

				
			

			

				

					10-20
				

			

		

		

			
				
主要介绍了JavaScript实现定时页面跳转功能,涉及javascript结合时间函数定时触发自定义函数功能操作技巧,需要的朋友可以参考下

			
		

	



                


  
              

                


	

		

			

				
					
js关闭当前页面跳转新页面

				
			

			

				

					weixin_30258901的博客
				

				

					06-26
					
					4218
					
				

			

		

		

			
				
页面代码：

1  <p class="info"><span style="font-weight: bold">所属项目：</span>
2         @foreach($programList as $task)
3             @if($taskList->project == $task->id )
4     ...

			
		

	





	

		

			

				
					
JavaScript实现页面跳转的方式汇总

				
			

			

				

					10-22
				

			

		

		

			
				
主要介绍了JavaScript实现页面跳转的方式汇总的相关资料,需要的朋友可以参考下

			
		

	



		

			
		



	

		

			

				
					
基于JavaScript实现跳转提示页面

				
			

			

				

					10-21
				

			

		

		

			
				
主要介绍了基于JavaScript实现跳转提示页面 的相关资料,需要的朋友可以参考下

			
		

	





	

		

			

				
					
js（javascript）中页面跳转和窗口关闭等操作

				
			

			

				

					zhan_qian的博客
				

				

					11-06
					
					6062
					
				

			

		

		

			
				
一、当前页面打开指定URL页面
二、在父页面打开新页面
三、在顶层页面打开新页面
四、刷新当前页面
五、自定义了frame的情况
六、获取当前文档的URL
七、停止跳转
八、挺秀的一种刷新方法
七、停止跳转
九、关闭窗口

			
		

	





	

		

			

				
					
JavaScript中页面之间跳转和打开新窗口方法汇总

				
			

			

				

					飞月程序人生
				

				

					07-23
					
					1902
					
				

			

		

		

			
				
使用JavaScript来实现java,Asp.nte等编程语言中页面跳转的方法有很多，这里根据平时使用的经验

			
		

	





	

		

			

				
					
js中location.href不跳转的问题

				
			

			

				

					菜鸟拥有不太多的知识
				

				

					09-11
					
					663
					
				

			

		

		

			
				
问题描述：在我的web项目中，我把页面跳转的任务交给了后台。因此前端必须发送一个请求。我的请求如下
function selectComByName () {
var comName = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲comName").val()…{pageContext.request.contextPath}/com/selectComByName?comName="+comName;
*但是页面始终不跳转，

			
		

	





	

		

			

				
					
AJAX介绍

				
			

			

				

					weixin_49627122的博客
				

				

					09-01
					
					487
					
				

			

		

		

			
				
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。异步：整个页面不会全部刷新，只有某个局部在刷新eg:验证用户名是否存在注意1：使用ajax发送请求，页面是 不可以通过后台跳转!!!

			
		

	





	

		

			

				
					
js关闭当前页面打开新的页面_Gatsby页面动画转换教程：使你的页面更有趣

				
			

			

				

					weixin_39699670的博客
				

				

					11-26
					
					347
					
				

			

		

		

			
				
作者 | Chris Nwamba译者 | 王强GatsbyJS 是一个基于 React 的静态站点生成器，由 GraphQL 提供支持。开发者可以先写好网站的代码和框架，然后用 Gatsby 把它们转换为单个 HTML 文件，加上所有的静态资源放到一个目录里。Gatsby 速度很快，而且已经预配置好了服务工作者、代码分割、服务器端渲染、智能图像加载、资产优化和数据预取等工作。但这些都是...

			
		

	





	

		

			

				
					
关于a标签如何进行页面不跳转且能执行js方法

				
			

			

				

					weixin_43458965的博客
				

				

					01-27
					
					410
					
				

			

		

		

			
				
一共有三种方法，都可以在页面不晃动的情况下执行方法
<a href="javaScript:void(0);" @click="upload">方法执行</a>
<a href="#" @click="upload">方法执行</a>
<a href="javaScript:;" @click="upload">方法执行</a>


...

			
		

	





	

		

			

				
					
JS 实现页面跳转的几种方法

					
最新发布

				
			

			

				

					tianxianghuiwei的博客
				

				

					10-20
					
					5569
					
				

			

		

		

			
				
（1)跳转带参（2)跳转无参HTML页面嵌套这里还有一个页面传值。

			
		

	





	

		

			

				
					
js关闭当前页面打开新的页面_微信小程序云开发教程微信小程序的JS基础常用的回调函数...

				
			

			

				

					weixin_39684052的博客
				

				

					12-03
					
					881
					
				

			

		

		

			
				
同学们大家好，我是小伊同学，上一节课中我们给大家介绍了回调函数的概念，今天我们一起来了解一下常用的回调函数。 下面，我们就来逐一介绍这些函数。 当这个页面第一次被加载时，函数的执行顺序为onLoad到onShow到onReady，依次执行这三个。其中，onLoad在页面加载时触发。一个页面只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数。因此，我们看到一般编译...

			
		

	





	

		

			

				
					
关于javascript异步问题

				
			

			

				

					YmwWow的博客
				

				

					10-30
					
					241
					
				

			

		

		

			
				
前言：我们在接触js的过中，总会遇到一些问题，比如输出结果不是我们想的那样，undefined等等问题，很多时候就是因为踩了js“异步”的坑。

异步：不用等待一件事完成就可以去做另外一件事情，比如你去洗衣机洗衣服和去厨房做饭这两件事情来说，你不用等到洗衣机洗完衣服了再去做饭，你在洗衣机洗衣服的过程中就可以去做饭啦，不用等。这就是异步。

同步：需要等待一件事完成之后再去做下一件事情，比如你排队上...

			
		

	





	

		

			

				
					
JavaScript更改当前页面地址栏 且不会进行跳转方法

				
			

			

				

					weixin_45966674的博客
				

				

					09-24
					
					2605
					
				

			

		

		

			
				
然后就可以对他做想做的操作  例如 替换里面的参数  或 直接重写。比较适合那种要换某个地址参数  且要手动刷新界面后才生效的需求。首先 我们先通过  location.href拿到地址栏信息。这个方法  会直接替换整个地址栏   但他不会调整界面。

			
		

	





	

		

			

				
					
JS window.open()失效，不跳转新页面

				
			

			

				

					欢迎来到我的博客
				

				

					12-21
					
					2526
					
				

			

		

		

			
				
// 下载
getDown: function (fileUrl) {
    $url = "<?= Yii::$app->params['upload_url'] ?>" + fileUrl;
    if(fileUrl){
        var temp=window.open('_blank');
        temp.location=$url;
    }else {
        swal('没有可下载资源', "", "warning");
    }

},
.

			
		

	





	

		

			

				
					
javascript 实现文件下载,不跳转页面

				
			

			

				

					qq_41974199的博客
				

				

					05-23
					
					904
					
				

			

		

		

			
				
这个函数的作用是根据传入的url和fileType，下载对应的文件。其中，fileType的类型有：pdf、word、excel、ppt、txt、png、jpg、gif、bmp、tiff、svg。如果传入的url为空，抛出错误；如果传入的fileType为空，抛出错误。使用该函数实现了在浏览器端。如果有错误，欢迎指正。进行下载文件的功能。

			
		

	





	

		

			

				
					
表单页面提交后不跳转的处理方法

				
			

			

				

					hslisz的博客
				

				

					08-05
					
					3844
					
				

			

		

		

			
				
表单页面提交后不跳转、表单域校验提示提交成功，并重置当前页面、实现上传文件多选

			
		

	





	

		

			

				
					
javascript实现页面跳转

				
			

			

				

					05-18
				

			

		

		

			
				
JavaScript 可以使用 `window.location` 对象来实现页面跳转。

例如，要将页面重定向到另一个网址，可以使用以下代码：

```javascript
window.location.href = "https://www.example.com";
```

如果要在同一网站内导航到不同页面，可以使用以下代码：

```javascript
window.location.href = "/path/to/page.html";
```

另外，还可以使用 `window.location.replace()` 方法来实现页面跳转。这个方法与 `window.location.href` 类似，但会替换当前页面的历史记录，使用户无法使用“返回”按钮返回到前一个页面。

```javascript
window.location.replace("/path/to/page.html");
``` 

需要注意的是，这些操作会导致页面重定向，也就是说当前页面会被卸载并加载新的页面。因此，如果您希望在不离开当前页面的情况下加载新内容，可以考虑使用 Ajax 或其他技术来实现。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
柒号华仔

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值