2

我正在尝试将 send 和 id 值从 form.php 发送到 test.php。没有ajax使用它工作正常。我正在学习 ajax，这是我的代码：

<html>
<head>
<script>
function showUser(str)
{
    if (str=="")
    {
        document.getElementById("txtHint").innerHTML="";
        return;
    }

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

    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("POST","ajax_test.php?q="+str,true);
    xmlhttp.send(sent&id);
}
</script>
</head>
<body>
<form>
    Enter the sentence: <input type="text" name="sent"/><br/>
    <input type="submit" name="insert" onclick="showUser(this.value)"/>
</form>
</br>
UPDATE </br>
<form action="ajax_test.php" method="post"/>
    <pre>
        Enter the ID : <input type="text" name="id"/><br/>
        Enter the sentence: <input type="text" name="sent"/><br/>
    </pre>
    <input type="submit" name="update"/>
</form>
</br>
<form>
    <input type="submit" onclick="showUser(this.value)"/>
</form>
<br>
<div id="txtHint">
    <b>Person info will be listed here.</b>
</div>
</body>
</html>

ajax_test.php 在这里：

<html> <body > 
<?php
$q = $_GET["q"];
if (!empty($_POST['insert']))
{
    echo "Operation: Insert";
    echo "<br/>";

    $s    = $_POST['sent'];
    $flag = 0;

    echo "Entered sentence : $s";

    if (preg_match_all('/[^=]*=([^;@]*)/', 
        shell_exec("/home/technoworld/Videos/LinSocket/client '$s'"),
        $matches)) //Values stored in ma.
    {
        $x = (int) $matches[1][0]; //optionally cast to int
        $y = (int) $matches[1][1];
    }

    echo "<br/>";
    echo "Positive count :$x";
    echo "<br/>";
    echo "Negative count :$y";
    echo "<br/>";

    //---------------DB stuff --------------------
    $con = mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $sql1 = "INSERT INTO table2 
             (id,sent,pcount,ncount,flag)
             VALUES
             ('','$_POST[sent]','" . $x . "','" . $y . "','" . $flag . "')";
    if (!mysqli_query($con, $sql1)) {
        die('Error: ' . mysqli_error($con));
    }

    echo "1 record added";
    mysqli_close($con);
}

// -------------------------------UPDATE --------------------------
if (!empty($_POST['update']))
{
    echo "Operation: update";
    echo "<br/>";

    $s    = $_POST['sent'];
    $flag = 1;

    echo "Entered sentence : $s";

    if (preg_match_all('/[^=]*=([^;@]*)/', 
        shell_exec("/home/technoworld/Videos/LinSocket/client '$s'"),
        $matches)) //Values stored in ma.
    {
        $x = (int) $matches[1][0]; //optionally cast to int
        $y = (int) $matches[1][1];
    }

    echo "<br/>";
    echo "Positive count :$x";
    echo "<br/>";
    echo "Negative count :$y";
    echo "<br/>";

    //---------------DB stuff --------------------
    $con = mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $sql1 = "INSERT INTO table2 
             (id,sent,pcount,ncount,flag)
             VALUES
             ('$_POST[id]','$_POST[sent]','" . $x . "','" . $y . "','" . $flag . "')";
    if (!mysqli_query($con, $sql1)) {
        die('Error: ' . mysqli_error($con));
    }

    echo "1 record added";
    mysqli_close($con);
}
?>
</html > </body >

当我单击按钮时，它什么也不显示。如何发送 id 和发送值，以便我可以在我正在使用的 ajax_test.php 上使用它？

4

2 回答 2

3

使用 ajax 方法post是无效的

xmlhttp.open("POST","ajax_test.php?q="+str,true);

相反，它应该是

xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.send('q='+str);

除非您使用该GET方法，否则不应将请求字符串放在 url

为了防止表单在点击时发送并转到操作页面，您需要在您的 javascript 中使用类似的函数，并且您还应该在函数顶部preventDefault()初始化 var 。xmlhttp

function showUser(str, e){
  e.preventDefault();
  var xmlhttp;

并在 htmlonclick="showUser(this.value, event)"

以下是此解决方案的短期修复，但我强烈建议您阅读有关 javascript、html 和 php 语法的更多信息，只要最佳实践

<script>
function showUser(form, e) {
 e.preventDefault();
 var xmlhttp;
 var submit = form.getElementsByClassName('submit')[0];
 var sent = form.getElementsByName('sent')[0].value || '';
 var id = form.getElementsByName('id')[0].value || '';


if (sent==""){
    document.getElementById("txtHint").innerHTML="";
    return;
}

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

xmlhttp.onreadystatechange=function(e) {
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open(form.method, form.action, true);
xmlhttp.send('sent='+sent+'&id='+id+'&'+submit.name+'='+submit.value);
}
</script>
<form action="ajax_test.php" method="POST" onsubmit="showUser(this, event)">
Enter the sentence: <input type="text" name="sent"><br>
<input type="submit" class="submit" name="insert" value="submit" >
</form>
<br>UPDATE <br>
 <form action="ajax_test.php" method="POST" onsubmit="showUser(this, event)">
<pre>
    Enter the ID : <input type="text" name="id"><br>
    Enter the sentence: <input type="text" name="sent"><br>
</pre>
 <input type="submit" class="submit" value="submit" name="update">
</form> <br>
<div id="txtHint">
 <b>Person info will be listed here.</b>
 </div>

除非您使用像 xhtml 这样的严格标记，否则您不需要在<br>br 或输入标签中添加右斜杠。<input>

在您的 ajax_test.php 文档中删除<html>and<body>标记，以便 ajax 可以正确处理它。不用担心，如果在没有 ajax 调用的情况下调用页面，它不会影响页面的呈现方式，浏览器会在到达页面时自动放入这些标签，除非它已经存在。

更改 ajax_test.php

<?php
// $q = $_POST["q"];
// you never process the $q var so i commented it
if (isset($_POST['insert']) && $_POST['insert'] !== '') {
echo "Operation: Insert","<br>";

$s = $_POST['sent'];
$flag = 0;

echo "Entered sentence : $s";

if (preg_match_all('/[^=]*=([^;@]*)/', 
    shell_exec("/home/technoworld/Videos/LinSocket/client '$s'"),
    $matches)){ //Values stored in ma. 
    $x = (int) $matches[1][0]; //optionally cast to int
    $y = (int) $matches[1][1];
}

echo "<br>",
     "Positive count :$x",
     "<br>",
     "Negative count :$y",
     "<br>";

//---------------DB stuff --------------------
$con = mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$sql1 = "INSERT INTO table2 
         (id,sent,pcount,ncount,flag)
         VALUES
         ('".$_POST['id']."','".$_POST['sent']."',' $x ','$y','$flag')";
if (mysqli_query($con, $sql1)) {
   echo "1 record added";
} else {
   die('Error: ' . mysqli_error($con));
}


mysqli_close($con);
}

// -------------------------------UPDATE --------------------------
 if (isset($_POST['update']) && $_POST['update'] !== '') {
echo "Operation: update", "<br>";
 // you say update but you are actually inserting below

$s    = $_POST['sent'];
$flag = 1;

echo "Entered sentence : $s";

if (preg_match_all('/[^=]*=([^;@]*)/', 
    shell_exec("/home/technoworld/Videos/LinSocket/client '$s'"),
    $matches)) //Values stored in ma.
{
    $x = (int) $matches[1][0]; //optionally cast to int
    $y = (int) $matches[1][1];
}

echo "<br>",
     "Positive count :$x",
     "<br>",
     "Negative count :$y",
     "<br>";

//---------------DB stuff --------------------
$con = mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test');
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$sql1 = "INSERT INTO table2 
         (id,sent,pcount,ncount,flag)
         VALUES
         ('".$_POST['id']."','".$_POST['sent']."',' $x ','$y','$flag')"; // error here again $_POST[id] should be $_POST['id'] with quotes
if (mysqli_query($con, $sql1)) {
  echo "1 record added";
} else { 
  die('Error: ' . mysqli_error($con));
}

 mysqli_close($con);
}
?>

这里有很多错误，我试图纠正它们，但我无法测试它，就像我说你应该阅读最佳实践，因为你的代码和语法非常糟糕，不要苛刻。

编辑

进一步解释preventDefault：

我们使用此功能来防止默认的表单提交操作，即通过将浏览器重新定位到操作页面action="ajax_test.php"并在后台设置参数或为GETurl 中的方法设置参数来发送表单。

然后在那之后你仍然想要发送表单，这就是ajax的用武之地；我们使用 ajax 异步发送表单，无需浏览器重定位。我们可以在 ajax 调用中加载页面并处理来自 javascript 内部调用的分页的响应xmlhttp.responseText。

于 2013-07-14T06:29:28.007 回答
1

这是代码： Context-type丢失和其他一些变化！

<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
    <script type="text/javascript">
    function showUser(form, e) {
        e.preventDefault();
        e.returnValue=false;
        var xmlhttp;
        var submit = form.getElementsByClassName('submit')[0];
        var sent = form.elements['sent'].value;
    var id = form.elements['id'].value;

        if (window.XMLHttpRequest) {
            xmlhttp=new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function(e) {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open(form.method, form.action, true);
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
        xmlhttp.send('sent=' + sent + '&id=' + id + '&' + submit.name + '=' + submit.value);
    }
    </script>
</head>
<body>
    <h4>INSERT</h4>
    <form action="ajax_test.php" method="POST" onsubmit="showUser(this, event)">
        <pre>
             <label>Enter the sentence: <input type="text" name="sent"></label><br/>
        </pre>
                <input type="submit" class="submit" name="insert" value="submit"/>
        <input type="" name="id" style="display: none"/>
    </form>

    <h4>UPDATE</h4>
    <form action="ajax_test.php" method="POST" onsubmit="showUser(this, event)">
        <pre>
            <label>Enter the ID:        </label><input type="text" name="id"><br>
            <label>Enter the sentence:  <input type="text" name="sent"></label><br />
        </pre>
        <input type="submit" class="submit" value="submit" name="update"/>
    </form>

    <br />
    <div id="txtHint">
        <b>Person info will be listed here.</b>
    </div>
</body>
</html>
于 2013-07-15T18:30:10.090 回答