Question

我想使用ajax提交表单，并使用innerHTML将结果返回到同一页面。但似乎表单上的输入值没有传递给php的动作。

这是我的html表单

<form id="check" method="POST" onsubmit="return checkFunction();">
                    <p>
                        <label for="store">Type Store Number to check:</label>
                        <input type="text" id="store" name="storenum" maxlength="4"/>
                    </p>
                    <p>
                        <input type="submit" value="Check" onclick="return checkFunction();"/>
                    </p>
                </form>

这是我希望在同一页面上返回结果的地方

<span id="results"></span>

这就是我把ajax调用放在一起的方式

function checkFunction(){
        var ajaxRequest;  

        try{
                // Opera 8.0+, Firefox, Safari
                ajaxRequest = new XMLHttpRequest();
        } catch (e){
                // Internet Explorer Browsers
                try{
                        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                        try{
                                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e){
                                alert("Your browser broke!");
                                return false;
                        }
                }
        }
        ajaxRequest.onreadystatechange = function(){
                if(ajaxRequest.readyState == 4){
                document.getElementById("results").innerHTML = ajaxRequest.responseText;
                }
        }
        ajaxRequest.open("POST","run.php",true);
        ajaxRequest.send();
}

这就是php动作文件放在一起的方式

<?php
$storeNum = $_POST['storenum'];

echo "<pre>Store number: " . $storeNum . "</pre>";
$pingresult = shell_exec("./ping_isp.sh $storeNum");
echo "<pre>$pingresult</pre>";
if (strpos($pingresult, 'ISP was unreachable') == true) {
echo '<script language="javascript">';
echo 'alert("ISP not available")';
echo '</script>';
die();
}
echo "<br>";

?>

如果我直接使用表单上的php作为动作，就像下面说的那样完美无缺

<form id="check" method="POST">
                    <p>
                        <label for="store">Type Store Number to check:</label>
                        <input type="text" id="store" name="storenum" maxlength="4"/>
                    </p>
                    <p>
                        <input type="submit" value="Check" formaction="run.php"/>
                    </p>
                </form>

但是这会将结果返回到另一页。我想在同一页面上返回结果。希望你们能帮助我解决这个问题。

Answer 1

我同意@ chris85，这可能很危险。无论如何，为了回答您的问题，我已经对您认为需要的代码进行了更改...

function checkFunction(){
    var ajaxRequest;  

    try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
    } catch (e){
            // Internet Explorer Browsers
            try{
                    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                    try{
                            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e){
                            alert("Your browser broke!");
                            return false;
                    }
            }
    }
    ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){
            document.getElementById("results").innerHTML = ajaxRequest.responseText;
            }
    }

    var storevalue = document.getElementByID("storenum").value;
    ajaxRequest.open("POST","run.php",true);
    ajaxRequest.send("storenum=" + storevalue);
}

如果我在编码方面犯了任何轻微的错误，请原谅我，这是未经测试的，而且我可能错过了一个错字。

编辑：我今天早上的时间比昨天多一点，所以我拿了你的代码并重新做了一点。下面的版本现在可以使用，应该可以为您提供所需的结果。

function checkFunction(){
    var xmlhttpmod;
    var storevalue = document.getElementByID("store").value;


    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttpmod=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttpmod=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttpmod.onreadystatechange=function() {
        if (xmlhttpmod.readyState==4 && xmlhttpmod.status==200)  {
            // console.log(xmlhttpmod.responseText);
            document.getElementById("results").innerHTML = xmlhttpmod.responseText;
        }
    }

    xmlhttpmod.open("POST","test.php",true);
    xmlhttpmod.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttpmod.send("storenum="+storevalue);
}

Answer 2

试试这个并发布您的结果

 <form id="check" method="POST">
     <p>
      <label for="store">Type Store Number to check:</label>
      <input type="text" id="store" name="storenum" maxlength="4"/>
     </p>
     <p>
      <input type="button" value="Check" id="submitMyForm"/>
     </p>
<div id="response"></div>
</form>

你的php文件：

<?php
if($_POST){
    $required = array('storenum');
    $error = false;
    foreach($required as $key){
        if(empty($_POST[$key])){    
            $error = true;
        }
    }
    if(!$error){
        // process data or whatever you need
    }
    else{
        echo 'empty field error';
    }
}
else{
    header("Location: ../login.php");
}

和你的ajax

    $('#submitMyForm').on('submit', function(){
    var thisForm = $(this),
        url = thisForm.attr('action'),
        type = thisForm.attr('method'),
        data = {};
    thisForm.find('[name]').each(function(index, value){    
        var thisField = $(this),
            name = thisField.attr('name'),
            value = thisField.val();
            data[name] = value;
    });
    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response){
            $('#response').hide().html(response).fadeIn(700);
        },
        error: function(){  
            $('#response').hide().html('<span class="label label-danger">Ocurrió un error desconocido</span>').fadeIn(700); 
        }
    });
    return false;
});

使用ajax发布表单并将结果返回到span或div

2 个答案: