Access custom module file directly using AJAX

Question

I want to directly pass POST data to my .php file which is located in my module folder. I know this is security risk, but I'll try to fix that later.

I'm doing research on this subject - how to do it with out using any components, so please don't suggest me com_ajax.

default.php

//defined('_JEXEC') or die; 
<form method="post" name="form1">
            <input type="checkbox" name="checkboxList[]" value="1">value1</input>
            <input type="checkbox" name="checkboxList[]" value="2">value2</input>
            <input type="checkbox" name="checkboxList[]" value="3">value3</input>
</form>

<script>
 jQuery(document).ready(function(jQuery){

   jQuery("input[type='checkbox']").on("change",function(){
    if(jQuery(this).is(":checked"))
    {
         var checkboxdata=[];

         jQuery("input[type='checkbox']").each(function(){

                  if(jQuery(this).is(":checked"))
                            {
                            checkboxdata.push(jQuery(this).val());
                            }

                  })

         var data = checkboxdata;
         jQuery.ajax({
             url: '/modules/mod_test/respond.php',
             type: 'POST',
             async: true,
             cache: false,
             data: data,
             success:function(r){
                    alert(data); 
             }
         })
    }
})

});

</script

On every tick in checkbox - I get alerted by data (so far all good!).

respond.php (custom php file I want to have direct access - send POST data with ajax)

<?php
print_r($_POST);
?>

---

UPDATE: [jamesgarrett]

default.php

<form method="post" action="" name="form1" id="mycustomform">
<input type="checkbox" name="checkboxList[]" onclick="function1();" value="1"> Apple</input><br>
<input type="checkbox" name="checkboxList[]" onclick="function1();" value="2"> Pineapple</input><br>
<input type="checkbox" name="checkboxList[]" onclick="function1();" value="3"> Pen</input>
</form>
<div id="response"></div>

<script>
function function1() {
var data = jQuery("#mycustomform").serialize() + '&thisisajax=1';
jQuery.ajax({
    url: "<?php echo JUri::current(); ?>", 
    type: "POST",
    data: data, 
    success: function(response){ 
        response = jQuery.parseJSON(response);
        if(response.success === true){
           jQuery('#response').html(response.data);
        } else {
            alert('error');
        }
    }
});
}
</script>

helper.php

<?php

$jinput = JFactory::getApplication()->input;
$data = $jinput->post->get('checkboxList', [], 'array');
$ajax_test = $jinput->post->get('thisisajax', 0, 'int');

if($ajax_test){
$some_text = ['','Apple','Pineapple','Pen'];
$response = "";
foreach($data as $d){
    $response .= $some_text[$d] . " ";
}
echo new JResponseJson($response);
jexit();
}


class ModHelloWorldHelper
{
public static function getHello()
{

}
}

Answer 1

Here's a complete example for a module in 1 file, not bypassing Joomla, not using a component, running php function on async posted data, & running some js on the returned data (why not).

Use the testing only section to get your query working before dealing with your ajax request.

<?php 
defined('_JEXEC') or die;

// toggle this variable in order to show the results of the db query for testing purposes
$production = 0;

$jinput = JFactory::getApplication()->input;
$data = $jinput->post->get('checkboxList', [], 'array');
$ajax_test = $jinput->post->get('thisisajax', 0, 'int');

// = TESING ONLY ===================================================

if(!production){
    $data = [1,2,3];
    $ajax_test = 1;
}

// = END TESTING ONLY ===============================================

if($ajax_test){
    $db = JFactory::getDbo();
    $query = $db->getQuery(true);
    $query->select($db->quoteName('*'));
    $query->from($db->quoteName('#__custom_table'));
    $query->where($db->quoteName('custom_id') . ' IN (' . implode(",",$data) .')');
    $db->setQuery($query);
    $results = $db->loadObjectList();

    if(!production){
        echo "<pre>" . print_r($results,1) . "</pre>";
        die();
    }

    // PROCESS RESULTS HERE

    $response = 'xxx?';

    echo new JResponseJson($response);
    jexit();
}
?>
<form method="post" action="" name="form1" id="mycustomform">
    <input type="checkbox" name="checkboxList[]" onclick="function1();" value="1"> Apple</input><br>
    <input type="checkbox" name="checkboxList[]" onclick="function1();" value="2"> Pineapple</input><br>
    <input type="checkbox" name="checkboxList[]" onclick="function1();" value="3"> Pen</input>
</form>
<div id="response"></div>

<script>
function function1() {
    var data = jQuery("#mycustomform").serialize() + '&thisisajax=1';
    jQuery.ajax({
        url: "<?php echo JUri::current(); ?>", 
        type: "POST",
        data: data, 
        success: function(response){ 
            response = jQuery.parseJSON(response);
            if(response.success === true){
               jQuery('#response').html(response.data);
            } else {
                alert('error');
            }
        }
    });
}
</script>

Answer 2

Tested your code and it works for me.

The things I changed were as follows, in case these are the issue:

• Changed all references from $ to jQuery so that I don't have to worry about defining the jQuery object or any conflicts.
• Added <script> tags around your javascript (though I assume you have just removed these for the sake of simplifying your question's code)
• My test site was in a subfolder, so I had to update the AJAX call appropriately, so that it would load from the root.

If you go directly to the response.php URL in a browser, it should display "Array()". Is this the case?

As far as not suggesting com_ajax - that is going to be the right place to at least study to see how Joomla have built an ajax component. Once you break out of the framework, you aren't really building a Joomla site.

Update:

Array(
   [3] => 
)

Means that you have run print_r() on a string and not an array, and so that alert is exactly how it should be.

var data = jQuery(this).val();

is only sending the value of the box you have just checked - not the form data, not the name/value pair of the checkbox, just the value - the this at this point refers to the element you have just clicked on (ie the specific checkbox) and not the data of the whole form.

For the sake of a quick, hacky example (this is not a gread approach), replace var data = jQuery(this).val(); with the following, which will send an array of checkbox data.

  var checkboxdata=[];


  jQuery("input[type='checkbox']").each(function(){

          if(jQuery(this).is(":checked"))
                    {
                    checkboxdata.push(jQuery(this).val());
                    }

          })

   var data=  checkboxdata; 

Update 2

You need to read up on how AJAX works.

Each time you call a page via AJAX, it basically acts the same as if you submitted a form whose action points to that page (or loaded a page passing parameters in the URL). The only real difference is that the output is sent to your javascript function rather than printed on screen to the user.

Each time you call a page via AJAX, it is like re-submitting a form, or re-loading a page. As with re-submitting a form, it is not going to remember what has happened to it before unless you specifically code it to do so.