提交表单而不重新加载页面

本文介绍了提交表单而不重新加载页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个JavaScript内建的函数，我想在提交命中后执行。它基本上完全改变了页面的外观。但我需要从搜索框中的变量仍然通过JavaScript。目前它闪烁并重置那里，因为它重新加载页面。

所以我在我的函数中设置了一个返回false，以防止这样做，但是我想要的变量没有通过表单提交。关于我应该怎么做才能得到它的任何想法？ （只要updateTable（）函数可以工作并且不会被页面重置重置，页面就可以刷新）

< form action =method =getonsubmit =return updateTable（）;> < input name =searchtype =text> < input type =submitvalue =搜索> < / form>

这是updateTable函数

function updateTable（） { var photoViewer = document.getElementById（'photoViewer'）; var photo = document.getElementById（'photo1'）。href; var numOfPics = 5; var columns = 3; var rows = Math.ceil（numOfPics / columns）; var content =; var count = 0; content =< table class ='photoViewer'id ='photoViewer'>; （r = 0; r <行; r ++）{ content + =< tr>; ; for（c = 0; c< columns; c ++）{ count ++; if（count == numOfPics）break; //这里是检查单元格数量是否等于要停止的图片数量 content + =< td>< a href ='+ photo +'id ='photo1'>< img class = 'photo'src ='+ photo +'alt ='照片'>< / a>< p>城市视图< / p>< / td>; } content + =< / tr>; } content + =< / table>; photoViewer.innerHTML = content;

解决方案

。

这是一个示例函数，用于提交数据并提醒页面响应。

函数submitForm（）{ var http = new XMLHttpRequest（）; http.open（POST，<<< WhereverTheFormIsGoing>>，true）; http.setRequestHeader（Content-type，application / x-www-form-urlencoded）; var params =search =+<<获取搜索值>>; //可能使用document.getElementById（...）。value http.send（params）; http.onload = function（）{ alert（http.responseText）; } }

I have a function built in javascript that I want executed after submit is hit. It basically changes the look of the page completely. But I need a variable from the search box to still go through to the javascript. At the moment it flashes and resets what was there because it reloads the page.

So I setup a return false in my function which keeps it from doing that but the variable I want doesn't get submitted through the form. Any ideas on what I should do to get it? (It is okay for the page to refresh as long as the updateTable() function works and isn't reset by the page reset)

<form action="" method="get" onsubmit="return updateTable();"> <input name="search" type="text"> <input type="submit" value="Search" > </form>

This is the updateTable function

function updateTable() { var photoViewer = document.getElementById('photoViewer'); var photo = document.getElementById('photo1').href; var numOfPics = 5; var columns = 3; var rows = Math.ceil(numOfPics/columns); var content=""; var count=0; content = "<table class='photoViewer' id='photoViewer'>"; for (r = 0; r < rows; r++) { content +="<tr>"; for (c = 0; c < columns; c++) { count++; if(count == numOfPics)break; // here is check if number of cells equal Number of Pictures to stop content +="<td><a href='"+photo+"' id='photo1'><img class='photo' src='"+photo+"' alt='Photo'></a><p>City View</p></td>"; } content +="</tr>"; } content += "</table>"; photoViewer.innerHTML = content;

解决方案

You can't do this using forms the normal way. Instead, you want to use AJAX.

A sample function that will submit the data and alert the page response.

function submitForm() { var http = new XMLHttpRequest(); http.open("POST", "<<whereverTheFormIsGoing>>", true); http.setRequestHeader("Content-type","application/x-www-form-urlencoded"); var params = "search=" + <<get search value>>; // probably use document.getElementById(...).value http.send(params); http.onload = function() { alert(http.responseText); } }