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

我想使用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>

这就是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作为操作，比如说下面的类似操作，那么它可以完美地工作

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);
}

键入要检查的门店号：

---

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

我同意@chris85，这样做可能很危险。无论如何，为了回答你的问题，我已经对你的代码做了我认为你需要的修改

 <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
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");
}

---

请尝试并发布您的结果

    $('#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;
});

键入要检查的门店号：

您的php文件：

---

我认为问题在于您没有将参数传递给php页面，您只是调用了没有POST值的页面。请尝试更改
ajaxRequest.send（）
发送到ajaxRequest.send（“storenum=“+yourstro重新估价”）将用户输入直接发送到shell可能非常危险。@ThrowBackDewd yes。我在ajax调用中做错了什么？如果这是另一种选择，我真的不知道如何使用jqueryajaxpost来实现它way@chris85我有一个单独的jquery验证来接受只需要4位数字的值。我试过你的建议，但还是不成功。我还尝试使用var storevalue=document.getElementByID（“store”）.value；因为这是元素的id，但没有运气。对不起，你是对的，我应该使用“store”而不是“storenum”。我会放一个
print\r（$\u POST）；退出在我的php页面顶部，查看传递了哪些值以确定错误的位置（注意，此信息将显示在responseText的主页面上，在您的示例中是“results”元素的内容）。我执行了您的建议，只在results元素上获得了“Array（）”。仍然在弄清楚原因，因为已经指示它存储id为“store”的元素的值。@Dren，请查看我的帖子的编辑，它应该可以解决您的问题您修改的ajax代码正确地接收表单的输入并将其传递给php，但我没有将结果传递给span/div元素。我试图更改这行文档。getElementById（“结果”）.innerHTML=ajaxRequest.responseText；要记录.getElementById（“结果”）.innerHTML=xmlhttpmod.responseText；但仍然无法将响应返回到页面。
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);
}

 <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
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");
}

    $('#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;
});