AJAX调用控制器动作

Question

I have a "mainpage" controller, with a view of the same name, containing a boostrap navbar along the top. Upon clicking the various options of the navbar, a div at the bottom of the view has it's contents replaced with an appropriate partial (using a "replaceWith / render" call in a .js.erb file)

For one such partial, I have a form with 2 select boxes. These need to be populated dynamically on loading of the partial, so I am trying to put some AJAX together. Below is my AJAX efforts thus far (found at the end of my partial's code):

<script>
    // Get Perforce Suites
    var xmlhttp;
    if (window.XMLHttpRequest) // modern browser
    {
        xmlhttp=new XMLHttpRequest();
    }
    else // proper old school! IE 6 and older. Does anyone...? Never mind...
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //processing of responsetext to go in here
        }

    }
    xmlhttp.open("GET","/perforce_sync/getPerforce", true);
    xmlhttp.send();
    alert (xmlhttp.responseText);
</script>

So you can see I still have the response processing to do... but as it stands, the alert(xmlhttp.responseText) is coming back empty.

I'm guessing its the xmlhttp.open that is wrong - I'm trying to call an action (getPerforce) in the "perforce_sync" controller. I'm not getting any errors in the server output - but nor am I getting anything back from the request!

Note - the above script was based mostly on http://tinyurl.com/ygzdwg with the URL based on what I read here http://tinyurl.com/netps6v

Any guidance welcomed! Thanks!

Answer 1

Let me explain how to use ajax:

---

Ajax

Ajax stands for Asynchronous Javascript And XML - which basically means it uses Javascript to send a request to a server on your behalf

The JS in your browser can then handle the response, allowing you to manipulate the DOM as required (update page without refresh)

Although you can use what you've got, JQuery has made Ajax a lot easier :

$.ajax({
   url: "/perforce_sync/getPerforce",
   data: [[form data]]
   success: function(data) { 
       //append data to DOM
   }
});

Calling this will allow you to handle the data you need from your controller without refresh

---

Code

To give you specific info, you've mentioned that your application needs to populate another select box depending on the value of the first select

I'd do this:

#config/routes.rb
scope module: 'perforce_sync' do
   get "getPerforce", to: "controller#action"
end

#app/assets/javascripts/application.js
$("#select1").on("change", function(){ 
    $.ajax({
        url: "/perforce_sync/getPerforce"
        data: $(this).val(),
        dataType: "json",
        success: function(data) {
            //handle data
        },
        error: function(data) {
           alert("error");
        }
    });
}); 

#app/controllers/your_controller.rb
def action
    respond_to do |format|
        format.json
    end
end