提交表单而不重新加载页面 [英] Submit form without reloading page

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

问题描述

我有一个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);
    }
}

这篇关于提交表单而不重新加载页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆