Fatal编程技术网
  • php/
  • Php 如何在按下提交按钮后为新数据刷新（更新）HTML页面

Php 如何在按下提交按钮后为新数据刷新（更新）HTML页面

php html

Php 如何在按下提交按钮后为新数据刷新（更新）HTML页面,php,html,Php,Html,我有一个HTML表单，它分为三个主要组件。顶部基本上是用于显示杂志名称的标题。此信息不会更改 中间部分是通过MySQL查询开发的一个表，用于在底部部分（数据输入屏幕）中输入故事信息后将其显示为目录 底部是一个数据输入屏幕，用于输入杂志期中包含的每个故事的相关信息 在输入数据并按下底部的submit按钮后，中间部分应该通过MySQL查询进行更新，以反映新输入的故事。这并没有发生 注：为清晰起见，已删除先前与此问题关联的代码。解决方案与各种形式的调用方式有关。感谢Sulthan Allaudeen提

我有一个HTML表单，它分为三个主要组件。顶部基本上是用于显示杂志名称的标题。此信息不会更改

中间部分是通过MySQL查询开发的一个表，用于在底部部分（数据输入屏幕）中输入故事信息后将其显示为目录

底部是一个数据输入屏幕，用于输入杂志期中包含的每个故事的相关信息

在输入数据并按下底部的submit按钮后，中间部分应该通过MySQL查询进行更新，以反映新输入的故事。这并没有发生

注：为清晰起见，已删除先前与此问题关联的代码。解决方案与各种形式的调用方式有关。感谢Sulthan Allaudeen提供的潜在解决方案。目前，我不熟悉使用jQueryAjax。最终我需要学习。

因为OP想知道jquery和ajax是如何调用的

$.ajax({
type: "POST",
url: "yourpage.php",
data: dataString,
cache: false,
success: function(html)
{
//your action
}
});
第1步：

识别输入

有一个带有类
触发器的按钮


$(".trigger").click(function() 
{
//your ajax call here
}


第二步：

触发ajax调用


$.ajax({
type: "POST",
url: "yourpage.php",
data: dataString,
cache: false,
success: function(html)
{
//your action
}
});


第三步：

在成功函数中显示结果


$("#YourResultDiv").html(data);


为此，您应该创建一个名为
YourResultDiv

注意：


在
yourpage.php
中，您只需打印表格，它将显示为输出
下面是一个简单的示例，显示在不离开当前页面的情况下提交表单的结果。表单提交是在Ajax的帮助下完成的。
每个表单都有自己的提交按钮，因此在onDocLoaded中循环匹配元素

1。blank.php表单已提交到此脚本


<?php
echo "-------------------------------<br>";
echo " G E T - V A R S<br>";
echo "-------------------------------<br>";
var_dump( $_GET ); echo "<br>";

echo "-------------------------------<br>";
echo " P O S T - V A R S<br>";
echo "-------------------------------<br>";
var_dump( $_POST ); echo "<br>";
echo "<hr>";

if (count($_FILES) > 0)
{
    var_dump($_FILES);
    echo "<hr>";
}
?>






2。blank.html包含两个表单，显示将其中一个表单提交到上述脚本的结果


<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);}
function allByClass(className,parent){return (parent == undefined ? document : parent).getElementsByClassName(className);}
function allByTag(tagName,parent){return (parent == undefined ? document : parent).getElementsByTagName(tagName);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}

function toggleClass(elem, className){elem.classList.toggle(className);}
function toggleClassById(targetElemId, className){byId(targetElemId).classList.toggle(className)}

function hasClass(elem, className){return elem.classList.contains(className);}
function addClass(elem, className){return elem.classList.add(className);}
function removeClass(elem, className){return elem.classList.remove(className);}

function forEachNode(nodeList, func){for (var i=0, n=nodeList.length; i<n; i++) func(nodeList[i], i, nodeList); }

// callback gets data via the .target.result field of the param passed to it.
function loadFileObject(fileObj, loadedCallback){var reader = new FileReader();reader.onload = loadedCallback;reader.readAsDataURL( fileObj );}

function myAjaxGet(url, successCallback, errorCallback)
{
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function()
    {
        if (this.readyState==4 && this.status==200)
            successCallback(this);
    }
    ajax.onerror = function()
    {
        console.log("AJAX request failed to: " + url);
        errorCallback(this);
    }
    ajax.open("GET", url, true);
    ajax.send();
}

function myAjaxPost(url, phpPostVarName, data, successCallback, errorCallback)
{
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function()
    {
        if (this.readyState==4 && this.status==200)
            successCallback(this);
    }
    ajax.onerror = function()
    {
        console.log("AJAX request failed to: " + url);
        errorCallback(this);
    }
    ajax.open("POST", url, true);
    ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajax.send(phpPostVarName+"=" + encodeURI(data) );
}

function myAjaxPostForm(url, formElem, successCallback, errorCallback)
{
    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function()
    {
        if (this.readyState==4 && this.status==200)
            successCallback(this);
    }
    ajax.onerror = function()
    {
        console.log("AJAX request failed to: " + url);
        errorCallback(this);
    }
    ajax.open("POST", url, true);
    var formData = new FormData(formElem);
    ajax.send( formData );
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////

window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
    forEachNode( allByClass('goBtn'), function(elem){elem.addEventListener('click', onGoBtnClicked, false);} );
}

function onGoBtnClicked(evt)
{
    evt.preventDefault();
    var thisElem = this;
    var thisForm = thisElem.parentNode;

    myAjaxPostForm('blank.php', thisForm, onPostSuccess, onPostFailed);

    function onPostSuccess(ajax)
    {
        byId('tgt').innerHTML = ajax.responseText;
    }
    function onPostFailed(ajax)
    {
        //byId('tgt').innerHTML = ajax.responseText;
        alert("POST FAILED!!!!");
    }
    return false;
}
</script>
<style>
#page
{
    display: inline-block;
    border: solid 1px gray;
    background-color: rgba(0,0,0,0.2);
    border-radius: 6px;
}
.controls, .tabDiv
{
    margin: 8px;
    border: solid 1px gray;
    border-radius: 6px;
}
.tabDiv
{
    overflow-y: hidden;
    min-width: 250px;
    background-color: white;
    border-radius: 6px;
}
.tabDiv > div
{
    padding: 8px;
}
</style>
</head>
<body>
<div id='page'>

    <div class='tabDiv' id='tabDiv1'>
        <!-- <div style='padding: 8px'> -->
        <div>
            <form id='mForm' enctype="multipart/form-data" >
                <label>Name: </label><input name='nameInput'/><br>
                <label>Age: </label><input type='number' name='ageInput'/><br>
                <input type='file' name='fileInput'/><br>
                <button class='goBtn'>GO</button>
            </form>
        </div>
    </div>

    <div class='tabDiv' id='tabDiv2'>
        <!-- <div style='padding: 8px'> -->
        <div>
            <form id='mForm' enctype="multipart/form-data" >
                <label>Email: </label><input type='email' name='emailInput'/><br>
                <label>Eye colour: </label><input name='eyeColourInput'/><br>
                <label>Read and agreed to conditions and terms: </label><input type='checkbox' name='termsAcceptedInput'/><br>
                <button class='goBtn'>GO</button>
            </form>
        </div>
    </div>

<!--    <hr>    -->
    <div class='tabDiv'>
        <div id='tgt'></div>
    </div>
</div>
</body>
</html>




“严格使用”；
函数byId（id，parent）{return（parent==未定义？文档：parent）.getElementById（id）；}
函数allByClass（className，parent）{return（parent==未定义？文档：parent）.getElementsByClassName（className）；}
函数allByTag（标记名，父项）{返回（父项==未定义？文档：父项）.getElementsByTagName（标记名）；}
函数newEl（tag）{returndocument.createElement（tag）；}
函数newText（txt）{return document.createTextNode（txt）；}
函数toggleClass（elem，className）{elem.classList.toggle（className）；}
函数toggleClassById（targetElemId，className）{byId（targetElemId）.classList.toggle（className）}
函数hasClass（elem，className）{返回elem.classList.contains（className）；}
函数addClass（elem，className）{返回elem.classList.add（className）；}
函数removeClass（elem，className）{返回elem.classList.remove（className）；}
函数forEachNode（nodeList，func）{for（var i=0，n=nodeList.length；i div
{
填充：8px；
}
名称：

年龄：



去
电子邮件：

眼睛颜色：

阅读并同意条件和条款：

去

刷新表单以显示添加的新数据的解决方案是通过以下行重新调用它：“include（“new_stories.inc.php”）”。这行代码在表单的数据输入部分中的MySQL插入代码之后立即执行


表格“new_stories.inc.php”（目录）的中间部分查询MySQL数据库以检索与当前杂志问题相关的故事信息。重新调用表单相当于重新查询。
为什么有这么大的
echo
只需在html之前关闭php标记，然后打开。此外，在提交按钮使用ec之后，还需要通过jquery ajax调用刷新数据我想看看代码是如何运行的。基本上是错误跟踪。不幸的是，对我来说，我不熟悉jquery-ajax。谢谢。将需要一些时间来消化。谢谢。将需要一些时间来消化。