Question

我们可以直接从html中的表单操作调用php：

<form name='x' action = "filename.php">

在这种情况下，即使我们没有通过，php也会收到表单中的所有输入。

我们可以从html中的表单动作调用js函数吗？

<form name='x' action = "javascript:jsFunction();">

然后，从js函数调用php？

jsFunction()
{   var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() 
    {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("result").innerHTML = xhttp.responseText;}
    };
    xhttp.open("POST", filename.php, true);
    xhttp.send();
}

提示我不能使用onsubmit，因为它从平台登出我。换句话说，它从登录页面的开头重新加载平台。我正在进行集成，而且我对该平台没有一个明确的想法。

修改1：

现在，在HTML文件中：

<form enctype='multipart/form-data' id = "myform">

<input type='submit' value='Basic search' onclick = "i2b2.BLAST.jsFunction();">

JS档案：

i2b2.BLAST.jsFunction = function () 
{
   var myForm = document.getElementById('myForm');
    myForm.addEventListener('submit', function(event)
    {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() 
    {
        if (xhttp.readyState == 4 && xhttp.status == 200)
        {
            document.getElementById("result").innerHTML = xhttp.responseText;
        }
     };

     xhttp.open("POST", blastresult.php, true);
     xhttp.send();

    event.preventDefault();
}); 
}

它从登录页面的开头重新加载平台！

EDIT2：

我发出警告，看看按钮是否调用了javascript。

i2b2.BLAST.jsFunction = function () 
{
   alert('hi');

    this.yuiTabs = new YAHOO.widget.TabView("BLAST-TABS", {activeIndex:1});//this two lines navigate to second tab
    this.yuiTabs.set('activeIndex', 1);

alert('hi');
    myForm.addEventListener('submit', function()
    {
       alert('hi');
        preventDefault();

按钮调用js并首先显示＆＃39; hi＆＃39;然后导航到第二个选项卡，然后重新加载页面。它停在第二个＆＃39; hi＆＃39;

非常感谢任何帮助。感谢。

Answer 1

而不是：

<form name='x' action = "javascript:jsFunction();">

使用：

<form name='x' onsubmit="jsFunction();">

您可以通过代码中显示的AJAX进行POST：

function jsFunction(event) {
    // prevent default event from taking place (submitting form to file)
    event.preventDefault();
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() 
    {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("result").innerHTML = xhttp.responseText;}
    };
    xhttp.open("POST", filename.php, true);
    xhttp.send();
}

虽然您需要序列化数据并将其传递给xhttp.send()，但需要将表单编码为：key1=value1&key2=value2。你可能最好以@mmm建议的方式使用jQuery。

Answer 2

是的，你可以，首先给你的FORM一个id

<form id="myForm"></form>

然后在javascript中试试这个：

var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(e)
{
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() 
    {
        if (xhttp.readyState == 4 && xhttp.status == 200)
        {
            document.getElementById("result").innerHTML = xhttp.responseText;
        }
     };

     xhttp.open("POST", filename.php, true);
     xhttp.send();

    e.preventDefault();
});

从表单操作调用js函数然后从js调用php

2 个答案: