Question

我尝试用mootools提交ajax表单。我尝试了3种不同的方式。一个人工作但其他人失败了。

这是我的Html表格

<div class="container">
    <form id="myForm" name="myForm" action="json.php" method="post">
            <div class="fields">
                <input id="first_name" type="text" name="fname" value="" />
                <label for="first_name">First Name</label>
            </div>
            <div class="fields">
                <input type="text" id="last_name" name="lname" value="" />
                <label for="last_name">Last Name</label>
            </div>

        <input id='submitButton' type="submit" value="SUBMIT">
    </form>
    <div id='bar' style='margin-top:20px'>  Yikes! </div>
</div>

这些是我尝试的方式 -

window.addEvent('domready', function(){
                // This WORKED well
        $('myForm').addEvent('submit', function(e) {
        e.preventDefault(); //new Event(e).stop();
        this.send();
        });

//This DOESNT WORK, Console error - ReferenceError: Form is not defined
        var trigger = $('submitButton');
        trigger.addEvent( 'click', function(event){
                    event.preventDefault()
          var sendform =    new Form.Request('myForm',console.log(), {
              onSend: function(){
                  console.log('sending');
              },
              onComplete: function(){
                  console.log('sent');
              }
          });           
          sendform.send();
    });
})
//This ALSO DOESNT WORK,shows-"NetworkError: 404 Not Found - http://localhost/basicdemos/%5Bobject%20Object%5D"
    var log = $('bar').empty()
    $('myForm').addEvent('submit', function(e) {
    new Event(e).stop();
    this.send({
        update: log,
        onComplete: function() {
            log.set('html',"SENT");
        }
    });
});

我认为我的问题可能在那里有一点点，但是很少有东西缺失.BTW，我的html表单和javascript在同一个index.php文件中。

更新 - 这也有效 -

$('myForm').set('send', {
                        url: 'json.php',
                        method: 'post',
                        noCache: true,
                        onSuccess: function(){
                            console.log(this.response.text);
                        }
                    });
            $('submitButton').addEvent( 'click', function(event){
                    event.preventDefault();
                    $('myForm').send();
                    });

Answer 1

我会说：

第一个示例有效，因为mootools有一个方法.send()，当应用于表单元素时实际上triggers a request。

第二个例子失败，因为它需要更多库。

第三个示例已弃用的代码new Event(e).stop();应为e.stop();，我认为您无法在onComplete内传递.send()，我试过了didn't work。

第四个示例有效，因为您在发送之前set()了请求选项。我建议使用var myRequest = new Request()语法，然后myRequest .send();

Mootools Ajax / Request的标准语法是：

var myRequest = new Request({
    url: 'fileName.php', // here or in the form html tag "action="fileName.php"
    method: 'get',       //or post
    onRequest: function(){
        myElement.set('text', 'loading...');
    },
    onSuccess: function(responseText){
        myElement.set('text', responseText);
    },
    onFailure: function(){
        myElement.set('text', 'Sorry, your request failed :(');
    }
});

使用具有不同版本的发送的Mootool发送的Ajax表单

1 个答案: